Skip to content

Commit ed251da

Browse files
matthewlipskimatthewlipski
authored
docs: Update exporter examples (#1989)
* Updated exporter examples * Implemented PR feedback * Overhauled import/export example styling * Small fixes
1 parent c7bde94 commit ed251da

File tree

25 files changed

+662
-256
lines changed

25 files changed

+662
-256
lines changed

‎examples/05-interoperability/01-converting-blocks-to-html/src/App.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,22 @@ export default function App() {
4141
// eslint-disable-next-line react-hooks/exhaustive-deps
4242
}, []);
4343

44-
// Renders the editor instance, and its contents as HTML below.
44+
// Renders the editor instance and HTML output.
4545
return (
46-
<div className="wrapper">
47-
<div>Input (BlockNote Editor):</div>
48-
<div className="item">
49-
<BlockNoteView editor={editor} onChange={onChange} />
46+
<div className="views">
47+
<div className="view-wrapper">
48+
<div className="view-label">Editor Input</div>
49+
<div className="view">
50+
<BlockNoteView editor={editor} onChange={onChange} />
51+
</div>
5052
</div>
51-
<div>Output (HTML):</div>
52-
<div className="item bordered">
53-
<pre>
54-
<code>{html}</code>
55-
</pre>
53+
<div className="view-wrapper">
54+
<div className="view-label">HTML Output</div>
55+
<div className="view">
56+
<pre>
57+
<code>{html}</code>
58+
</pre>
59+
</div>
5660
</div>
5761
</div>
5862
);

‎examples/05-interoperability/01-converting-blocks-to-html/src/styles.css‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,64 @@
1-
.wrapper {
1+
.views {
2+
container-name: views;
3+
container-type: inline-size;
24
display: flex;
3-
flex-direction: column;
5+
flex-direction: row;
6+
flex-wrap: wrap;
7+
gap: 8px;
48
height: 100%;
9+
padding: 8px;
10+
}
11+
12+
.view-wrapper {
13+
display: flex;
14+
flex-direction: column;
15+
height: calc(50% - 4px);
16+
width: 100%;
17+
}
18+
19+
@container views (width > 1024px) {
20+
.view-wrapper {
21+
height: 100%;
22+
width: calc(50% - 4px);
23+
}
24+
}
25+
26+
.view-label {
27+
color: #0090ff;
28+
display: flex;
29+
font-size: 12px;
30+
font-weight: bold;
31+
justify-content: space-between;
32+
margin-inline: 16px;
533
}
634

7-
.item {
8-
border-radius: 0.5rem;
35+
.view {
36+
border: solid #0090ff 1px;
37+
border-radius: 16px;
938
flex: 1;
10-
overflow: hidden;
39+
height: 0;
40+
padding: 8px;
1141
}
1242

13-
.item.bordered {
14-
border: 1px solid gray;
43+
.view .bn-container {
44+
height: 100%;
45+
margin: 0;
46+
max-width: none;
47+
padding: 0;
1548
}
1649

17-
.item pre {
18-
border-radius: 0.5rem;
50+
.view .bn-editor {
1951
height: 100%;
2052
overflow: auto;
21-
padding-block: 1rem;
22-
padding-inline: 54px;
23-
width: 100%;
53+
}
54+
55+
.view pre {
56+
background-color: #0090ff20;
57+
border-radius: 8px;
58+
flex: 1;
59+
height: 100%;
60+
margin: 0;
61+
overflow: auto;
62+
padding: 8px;
2463
white-space: pre-wrap;
2564
}

‎examples/05-interoperability/02-converting-blocks-from-html/src/App.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,22 @@ export default function App() {
3131
loadInitialHTML();
3232
}, [editor]);
3333

34-
// Renders a text area for you to write/paste HTML in, and the editor instance
35-
// below, which displays the current HTML as blocks.
34+
// Renders the HTML input and editor instance.
3635
return (
37-
<div className={"wrapper"}>
38-
<div>Input (HTML):</div>
39-
<div className={"item bordered"}>
40-
<code>
41-
<textarea defaultValue={initialHTML} onChange={htmlInputChanged} />
42-
</code>
36+
<div className="views">
37+
<div className="view-wrapper">
38+
<div className="view-label">HTML Input</div>
39+
<div className="view">
40+
<code>
41+
<textarea defaultValue={initialHTML} onChange={htmlInputChanged} />
42+
</code>
43+
</div>
4344
</div>
44-
<div>Output (BlockNote Editor):</div>
45-
<div className={"item"}>
46-
<BlockNoteView editor={editor} editable={false} />
45+
<div className="view-wrapper">
46+
<div className="view-label">Editor Output</div>
47+
<div className="view">
48+
<BlockNoteView editor={editor} editable={false} />
49+
</div>
4750
</div>
4851
</div>
4952
);

‎examples/05-interoperability/02-converting-blocks-from-html/src/styles.css‎

Lines changed: 53 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,67 @@
1-
.wrapper {
1+
.views {
2+
container-name: views;
3+
container-type: inline-size;
24
display: flex;
3-
flex-direction: column;
5+
flex-direction: row;
6+
flex-wrap: wrap;
7+
gap: 8px;
48
height: 100%;
9+
padding: 8px;
510
}
611

7-
.item {
8-
border-radius: 0.5rem;
12+
.view-wrapper {
13+
display: flex;
14+
flex-direction: column;
15+
height: calc(50% - 4px);
16+
width: 100%;
17+
}
18+
19+
@container views (width > 1024px) {
20+
.view-wrapper {
21+
height: 100%;
22+
width: calc(50% - 4px);
23+
}
24+
}
25+
26+
.view-label {
27+
color: #0090ff;
28+
display: flex;
29+
font-size: 12px;
30+
font-weight: bold;
31+
justify-content: space-between;
32+
margin-inline: 16px;
33+
}
34+
35+
.view {
36+
border: solid #0090ff 1px;
37+
border-radius: 16px;
938
flex: 1;
10-
overflow: hidden;
39+
height: 0;
40+
padding: 8px;
41+
}
42+
43+
.view .bn-container {
44+
height: 100%;
45+
margin: 0;
46+
max-width: none;
47+
padding: 0;
1148
}
1249

13-
.item.bordered {
14-
border: 1px solid gray;
50+
.view .bn-editor {
51+
height: 100%;
52+
overflow: auto;
1553
}
1654

17-
.item textarea {
18-
background-color: transparent;
19-
border-radius: 0.5rem;
55+
.view textarea {
56+
background-color: #0090ff20;
57+
border: none;
58+
border-radius: 8px;
59+
flex: 1;
2060
height: 100%;
61+
margin: 0;
2162
overflow: auto;
22-
padding-block: 1rem;
23-
padding-inline: 54px;
63+
padding: 8px;
2464
resize: none;
65+
white-space: pre-wrap;
2566
width: 100%;
2667
}

‎examples/05-interoperability/03-converting-blocks-to-md/src/App.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,22 @@ export default function App() {
4141
// eslint-disable-next-line react-hooks/exhaustive-deps
4242
}, []);
4343

44-
// Renders the editor instance, and its contents as Markdown below.
44+
// Renders the editor instance and Markdown output.
4545
return (
46-
<div className={"wrapper"}>
47-
<div>Input (BlockNote Editor):</div>
48-
<div className={"item"}>
49-
<BlockNoteView editor={editor} onChange={onChange} />
46+
<div className="views">
47+
<div className="view-wrapper">
48+
<div className="view-label">Editor Input</div>
49+
<div className="view">
50+
<BlockNoteView editor={editor} onChange={onChange} />
51+
</div>
5052
</div>
51-
<div>Output (Markdown):</div>
52-
<div className={"item bordered"}>
53-
<pre>
54-
<code>{markdown}</code>
55-
</pre>
53+
<div className="view-wrapper">
54+
<div className="view-label">Markdown Output</div>
55+
<div className="view">
56+
<pre>
57+
<code>{markdown}</code>
58+
</pre>
59+
</div>
5660
</div>
5761
</div>
5862
);

‎examples/05-interoperability/03-converting-blocks-to-md/src/styles.css‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,64 @@
1-
.wrapper {
1+
.views {
2+
container-name: views;
3+
container-type: inline-size;
24
display: flex;
3-
flex-direction: column;
5+
flex-direction: row;
6+
flex-wrap: wrap;
7+
gap: 8px;
48
height: 100%;
9+
padding: 8px;
10+
}
11+
12+
.view-wrapper {
13+
display: flex;
14+
flex-direction: column;
15+
height: calc(50% - 4px);
16+
width: 100%;
17+
}
18+
19+
@container views (width > 1024px) {
20+
.view-wrapper {
21+
height: 100%;
22+
width: calc(50% - 4px);
23+
}
24+
}
25+
26+
.view-label {
27+
color: #0090ff;
28+
display: flex;
29+
font-size: 12px;
30+
font-weight: bold;
31+
justify-content: space-between;
32+
margin-inline: 16px;
533
}
634

7-
.item {
8-
border-radius: 0.5rem;
35+
.view {
36+
border: solid #0090ff 1px;
37+
border-radius: 16px;
938
flex: 1;
10-
overflow: hidden;
39+
height: 0;
40+
padding: 8px;
1141
}
1242

13-
.item.bordered {
14-
border: 1px solid gray;
43+
.view .bn-container {
44+
height: 100%;
45+
margin: 0;
46+
max-width: none;
47+
padding: 0;
1548
}
1649

17-
.item pre {
18-
border-radius: 0.5rem;
50+
.view .bn-editor {
1951
height: 100%;
2052
overflow: auto;
21-
padding-block: 1rem;
22-
padding-inline: 54px;
23-
width: 100%;
53+
}
54+
55+
.view pre {
56+
background-color: #0090ff20;
57+
border-radius: 8px;
58+
flex: 1;
59+
height: 100%;
60+
margin: 0;
61+
overflow: auto;
62+
padding: 8px;
2463
white-space: pre-wrap;
2564
}

‎examples/05-interoperability/04-converting-blocks-from-md/src/App.tsx‎

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,25 @@ export default function App() {
3131
loadInitialHTML();
3232
}, [editor]);
3333

34-
// Renders a text area for you to write/paste Markdown in, and the editor instance
35-
// below, which displays the current Markdown as blocks.
34+
// Renders the Markdown input and editor instance.
3635
return (
37-
<div className={"wrapper"}>
38-
<div>Input (Markdown):</div>
39-
<div className={"item bordered"}>
40-
<code>
41-
<textarea
42-
defaultValue={initialMarkdown}
43-
onChange={markdownInputChanged}
44-
/>
45-
</code>
36+
<div className="views">
37+
<div className="view-wrapper">
38+
<div className="view-label">Markdown Input</div>
39+
<div className="view">
40+
<code>
41+
<textarea
42+
defaultValue={initialMarkdown}
43+
onChange={markdownInputChanged}
44+
/>
45+
</code>
46+
</div>
4647
</div>
47-
<div>Output (BlockNote Editor):</div>
48-
<div className={"item"}>
49-
<BlockNoteView editor={editor} editable={false} />
48+
<div className="view-wrapper">
49+
<div className="view-label">Editor Output</div>
50+
<div className="view">
51+
<BlockNoteView editor={editor} editable={false} />
52+
</div>
5053
</div>
5154
</div>
5255
);

0 commit comments

Comments
 (0)