Skip to content

Commit 1b0e811

Browse files
hilhorstthilhorstt
committed
chore: integrate Clippy components and update slot attributes in editor
1 parent c783edb commit 1b0e811

File tree

4 files changed

+64
-54
lines changed

4 files changed

+64
-54
lines changed

‎src/components/Canvas/Canvas.tsx‎

Lines changed: 59 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import { CodeBlockSyntaxHighlighting } from '@site/src/components/CodeBlockSyntaxHighlighting';
22
import { Button, Document, Paragraph, Surface } from '@utrecht/component-library-react/dist/css-module';
3-
import { HTMLContent } from '@utrecht/component-library-react/dist/css-module';
43
import clsx from 'clsx';
54
import prettierBabel from 'prettier/plugins/babel.mjs';
65
import prettierESTree from 'prettier/plugins/estree.mjs';
76
import prettierHTML from 'prettier/plugins/html.mjs';
87
import prettierPostcss from 'prettier/plugins/postcss.mjs';
98
import prettier from 'prettier/standalone';
109
import type { CSSProperties, ElementType, PropsWithChildren, ReactNode } from 'react';
11-
import { isValidElement, useEffect, useId, useState } from 'react';
12-
import { Fragment } from 'react';
10+
import { isValidElement, useEffect, useId, useState, Fragment } from 'react';
1311
import * as ReactDOMServer from 'react-dom/server';
1412
import './Canvas.css';
13+
import '@nl-design-system-community/editor/theme.css';
14+
import {
15+
ClippyContent,
16+
ClippyContext,
17+
ClippyGutter,
18+
ClippyValidationsList,
19+
} from '@nl-design-system-community/editor-react';
1520

1621
export type CanvasContainerType = 'document' | 'paragraph' | 'surface';
1722

@@ -61,6 +66,7 @@ export const Canvas = ({
6166
}: CanvasProps) => {
6267
// By default the `children` argument is converted to code.
6368
const jsxTree = typeof children === 'function' ? children() : children;
69+
const contentHtml = ReactDOMServer.renderToStaticMarkup(<>{jsxTree}</>);
6470
// You can override the code from `children` with the `code` argument.
6571
// The code argument can be a string, or JSX, or a function that generates JSX.
6672
const codeJsxTree = typeof code === 'function' ? code() : isValidElement(code) ? code : undefined;
@@ -104,54 +110,58 @@ export const Canvas = ({
104110
}
105111

106112
return (
107-
<div className={clsx('nlds-canvas')}>
108-
{jsxTree && (
109-
<div className={clsx('nlds-canvas__example')}>
110-
<div className="voorbeeld-theme" style={designTokens}>
111-
<Container>
112-
<HTMLContent>{jsxTree}</HTMLContent>
113-
</Container>
113+
<ClippyContext id={codeBlockId} topLevelHeading={2}>
114+
<div slot="value" hidden dangerouslySetInnerHTML={{ __html: contentHtml }} />
115+
<div className={clsx('nlds-canvas')}>
116+
{jsxTree && (
117+
<>
118+
<ClippyContent>
119+
<ClippyGutter mode="list" />
120+
</ClippyContent>
121+
</>
122+
)}
123+
{displayCode && (
124+
<div className={clsx('nlds-canvas__toolbar')}>
125+
<Button
126+
className={clsx('nlds-canvas__button', 'nlds-canvas__toggle-code-button')}
127+
appearance="subtle-button"
128+
onClick={toggleExpanded}
129+
aria-expanded={expandedSourceCode}
130+
aria-controls={codeBlockId}
131+
>
132+
{!expandedSourceCode ? 'Bekijk code' : 'Verberg code'}
133+
</Button>
114134
</div>
115-
</div>
116-
)}
117-
{displayCode && (
118-
<div className={clsx('nlds-canvas__toolbar')}>
119-
<Button
120-
className={clsx('nlds-canvas__button', 'nlds-canvas__toggle-code-button')}
121-
appearance="subtle-button"
122-
onClick={toggleExpanded}
123-
aria-expanded={expandedSourceCode}
124-
aria-controls={codeBlockId}
135+
)}
136+
{displayCode && (
137+
<div
138+
className={clsx('nlds-canvas__code-block', !copy && 'nlds-canvas__code-block--user-select-none')}
139+
id={codeBlockId}
140+
hidden={!expandedSourceCode}
125141
>
126-
{!expandedSourceCode ? 'Bekijk code' : 'Verberg code'}
127-
</Button>
128-
</div>
129-
)}
130-
{displayCode && (
131-
<div
132-
className={clsx('nlds-canvas__code-block', !copy && 'nlds-canvas__code-block--user-select-none')}
133-
id={codeBlockId}
134-
hidden={!expandedSourceCode}
135-
>
136-
<CodeBlockSyntaxHighlighting
137-
codeBlockLabel={'Codevoorbeeld'}
138-
syntax={language}
139-
textContent={exampleSourceCode}
140-
trim
141-
/>
142-
{copy && (
143-
<div className={clsx('nlds-canvas__toolbar', 'nlds-canvas__toolbar--copy')}>
144-
<Button
145-
className={clsx('nlds-canvas__button', 'nlds-canvas__copy-button')}
146-
appearance="subtle-button"
147-
onClick={copyCode}
148-
>
149-
Kopieer
150-
</Button>
151-
</div>
152-
)}
142+
<CodeBlockSyntaxHighlighting
143+
codeBlockLabel={'Codevoorbeeld'}
144+
syntax={language}
145+
textContent={exampleSourceCode}
146+
trim
147+
/>
148+
{copy && (
149+
<div className={clsx('nlds-canvas__toolbar', 'nlds-canvas__toolbar--copy')}>
150+
<Button
151+
className={clsx('nlds-canvas__button', 'nlds-canvas__copy-button')}
152+
appearance="subtle-button"
153+
onClick={copyCode}
154+
>
155+
Kopieer
156+
</Button>
157+
</div>
158+
)}
159+
</div>
160+
)}
161+
<div>
162+
<ClippyValidationsList />
153163
</div>
154-
)}
155-
</div>
164+
</div>
165+
</ClippyContext>
156166
);
157167
};

‎src/components/RichTextEditor.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export const RichTextEditor = () => {
4343
{() => (
4444
<Suspense fallback="Rich text editor laden...">
4545
<ClippyEditor id="react-editor-1">
46-
<div slot="content" hidden>
46+
<div slot="value" hidden>
4747
<h1>Kopniveau 1</h1>
4848
<p>Dit is een voorbeeld van de Clippy Editor met een Lit's React wrapper.</p>
4949
<h3>Kopniveau 3</h3>
@@ -57,7 +57,7 @@ export const RichTextEditor = () => {
5757
<hr />
5858
<h2>Configuratie</h2>
5959
<ClippyEditor toolbarConfig={[['bold', 'italic', 'underline', 'code']]} id="react-editor-2">
60-
<div slot="content" hidden>
60+
<div slot="value" hidden>
6161
<h1>Kopniveau 1</h1>
6262
<p>Dit is een voorbeeld van de Clippy Editor met een Lit's React wrapper.</p>
6363
<h3>Kopniveau 3</h3>
@@ -73,7 +73,7 @@ export const RichTextEditor = () => {
7373
Voorbeeld<code>ClippyGutter</code>, <code>ClippyGutter</code> en <code>ClippyGutter</code>
7474
</p>
7575
<ClippyContext id="react-editor-3">
76-
<div slot="content">
76+
<div slot="value">
7777
<h1>Kopniveau 1 in React editor</h1>
7878
<p>
7979
Dit is een voorbeeld van de Clippy Editor{' '}

‎src/pages/project/expertteam-digitale-toegankelijkheid/cms-en/preview.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export default function CmsEnPlainHtmlPage() {
3939
<Suspense fallback="Voorbeeld laden...">
4040
<div className="ma-theme clippy-theme utrecht-root" style={pageStyle}>
4141
<ClippyContentView>
42-
<div slot="content">
42+
<div slot="value">
4343
<h1>NL Design System Editor — voorbeeld</h1>
4444
<p>
4545
Onder die steden, <strong>welke</strong> <em>vanouds</em> aan de

‎src/theme/Root.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import '@utrecht/document-css/dist/html/index.css';
1212
function Root({ children }: PropsWithChildren<object>) {
1313
return (
1414
<>
15-
<PageLayout className="ma-theme">{children}</PageLayout>
15+
<PageLayout className="ma-theme clippy-theme">{children}</PageLayout>
1616
</>
1717
);
1818
}

0 commit comments

Comments
 (0)
⚡