Skip to content

Commit 37dfef8

Browse files
authored
make collab provider optional and change output of code blocks (#321)
1 parent 5ea8b06 commit 37dfef8

File tree

2 files changed

+71
-25
lines changed

2 files changed

+71
-25
lines changed

packages/core/src/BlockNoteExtensions.ts

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -118,32 +118,34 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
118118
fragment: opts.collaboration.fragment,
119119
})
120120
);
121-
const defaultRender = (user: { color: string; name: string }) => {
122-
const cursor = document.createElement("span");
121+
if (opts.collaboration.provider?.awareness) {
122+
const defaultRender = (user: { color: string; name: string }) => {
123+
const cursor = document.createElement("span");
123124

124-
cursor.classList.add(styles["collaboration-cursor__caret"]);
125-
cursor.setAttribute("style", `border-color: ${user.color}`);
125+
cursor.classList.add(styles["collaboration-cursor__caret"]);
126+
cursor.setAttribute("style", `border-color: ${user.color}`);
126127

127-
const label = document.createElement("span");
128+
const label = document.createElement("span");
128129

129-
label.classList.add(styles["collaboration-cursor__label"]);
130-
label.setAttribute("style", `background-color: ${user.color}`);
131-
label.insertBefore(document.createTextNode(user.name), null);
130+
label.classList.add(styles["collaboration-cursor__label"]);
131+
label.setAttribute("style", `background-color: ${user.color}`);
132+
label.insertBefore(document.createTextNode(user.name), null);
132133

133-
const nonbreakingSpace1 = document.createTextNode("\u2060");
134-
const nonbreakingSpace2 = document.createTextNode("\u2060");
135-
cursor.insertBefore(nonbreakingSpace1, null);
136-
cursor.insertBefore(label, null);
137-
cursor.insertBefore(nonbreakingSpace2, null);
138-
return cursor;
139-
};
140-
ret.push(
141-
CollaborationCursor.configure({
142-
user: opts.collaboration.user,
143-
render: opts.collaboration.renderCursor || defaultRender,
144-
provider: opts.collaboration.provider,
145-
})
146-
);
134+
const nonbreakingSpace1 = document.createTextNode("\u2060");
135+
const nonbreakingSpace2 = document.createTextNode("\u2060");
136+
cursor.insertBefore(nonbreakingSpace1, null);
137+
cursor.insertBefore(label, null);
138+
cursor.insertBefore(nonbreakingSpace2, null);
139+
return cursor;
140+
};
141+
ret.push(
142+
CollaborationCursor.configure({
143+
user: opts.collaboration.user,
144+
render: opts.collaboration.renderCursor || defaultRender,
145+
provider: opts.collaboration.provider,
146+
})
147+
);
148+
}
147149
} else {
148150
// disable history extension when collaboration is enabled as Yjs takes care of undo / redo
149151
ret.push(History);

packages/core/src/api/formatConversions/formatConversions.ts

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import rehypeRemark from "rehype-remark";
44
import rehypeStringify from "rehype-stringify";
55
import remarkGfm from "remark-gfm";
66
import remarkParse from "remark-parse";
7-
import remarkRehype from "remark-rehype";
7+
import remarkRehype, { defaultHandlers } from "remark-rehype";
88
import remarkStringify from "remark-stringify";
99
import { unified } from "unified";
1010
import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
@@ -47,7 +47,7 @@ export async function HTMLToBlocks<BSchema extends BlockSchema>(
4747
htmlNode.innerHTML = html.trim();
4848

4949
const parser = DOMParser.fromSchema(schema);
50-
const parentNode = parser.parse(htmlNode);
50+
const parentNode = parser.parse(htmlNode); //, { preserveWhitespace: "full" });
5151

5252
const blocks: Block<BSchema>[] = [];
5353

@@ -73,6 +73,45 @@ export async function blocksToMarkdown<BSchema extends BlockSchema>(
7373
return markdownString.value as string;
7474
}
7575

76+
// modefied version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
77+
// that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
78+
function code(state: any, node: any) {
79+
const value = node.value ? node.value + "\n" : "";
80+
/** @type {Properties} */
81+
const properties: any = {};
82+
83+
if (node.lang) {
84+
// changed line
85+
properties["data-language"] = node.lang;
86+
}
87+
88+
// Create `<code>`.
89+
/** @type {Element} */
90+
let result: any = {
91+
type: "element",
92+
tagName: "code",
93+
properties,
94+
children: [{ type: "text", value }],
95+
};
96+
97+
if (node.meta) {
98+
result.data = { meta: node.meta };
99+
}
100+
101+
state.patch(node, result);
102+
result = state.applyData(node, result);
103+
104+
// Create `<pre>`.
105+
result = {
106+
type: "element",
107+
tagName: "pre",
108+
properties: {},
109+
children: [result],
110+
};
111+
state.patch(node, result);
112+
return result;
113+
}
114+
76115
export async function markdownToBlocks<BSchema extends BlockSchema>(
77116
markdown: string,
78117
blockSchema: BSchema,
@@ -81,7 +120,12 @@ export async function markdownToBlocks<BSchema extends BlockSchema>(
81120
const htmlString = await unified()
82121
.use(remarkParse)
83122
.use(remarkGfm)
84-
.use(remarkRehype)
123+
.use(remarkRehype, {
124+
handlers: {
125+
...(defaultHandlers as any),
126+
code,
127+
},
128+
})
85129
.use(rehypeStringify)
86130
.process(markdown);
87131

0 commit comments

Comments
 (0)