Skip to content

Commit 5dd5414

Browse files
RobbertRobbert
committed
WIP
1 parent 9b584f5 commit 5dd5414

21 files changed

+528
-38
lines changed

‎packages/example-editor/index.html‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<link href="https://unpkg.com/@nl-design-system-unstable/basis-design-tokens/dist/variables.css" rel="stylesheet" />
6+
</head>
7+
<body>
8+
<div class="element"></div>
9+
<script type="module">
10+
import { defineUtrechtParagraph } from './src/custom-element/utrecht-paragraph.mjs';
11+
import { defineUtrechtUnorderedList } from './src/custom-element/utrecht-unordered-list.mjs';
12+
import { defineUtrechtUnorderedListItem } from './src/custom-element/utrecht-unordered-list-item.mjs';
13+
import { defineUtrechtOrderedList } from './src/custom-element/utrecht-ordered-list.mjs';
14+
import { defineUtrechtOrderedListItem } from './src/custom-element/utrecht-ordered-list-item.mjs';
15+
import { defineUtrechtHeading } from './src/custom-element/utrecht-heading.mjs';
16+
import { defineExampleEditorElement } from './src/tiptap/example-editor.js';
17+
defineExampleEditorElement();
18+
defineUtrechtParagraph();
19+
defineUtrechtHeading();
20+
defineUtrechtUnorderedList();
21+
defineUtrechtUnorderedListItem();
22+
defineUtrechtOrderedList();
23+
defineUtrechtOrderedListItem();
24+
document.addEventListener('validationError', (evt) => {
25+
const result = document.getElementById('error-list');
26+
while (result.lastChild) {
27+
result.removeChild(result.lastChild);
28+
}
29+
evt.detail.errors.forEach((e) => {
30+
result.innerHTML += `<li>Validation Error: ${e.message}</li>`;
31+
});
32+
});
33+
</script>
34+
<div class="split-screen">
35+
<example-editor>
36+
<template>
37+
<utrecht-heading level="1">Heading</utrecht-heading>
38+
<utrecht-heading level="2">Heading</utrecht-heading>
39+
<utrecht-heading level="3">Heading</utrecht-heading>
40+
<utrecht-heading level="4">Heading</utrecht-heading>
41+
<utrecht-heading level="5">Heading</utrecht-heading>
42+
<utrecht-heading level="6">Heading</utrecht-heading>
43+
<utrecht-heading level="7">Heading 7</utrecht-heading>
44+
<utrecht-paragraph>Edit me!</utrecht-paragraph>
45+
<utrecht-heading level="6"></utrecht-heading
46+
><!-- empty heading, oh no! -->
47+
<utrecht-paragraph></utrecht-paragraph
48+
><!-- empty paragraph, oh no! -->
49+
<utrecht-paragraph>&nbsp;</utrecht-paragraph
50+
><!-- empty-ish paragraph, oh no! -->
51+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
52+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
53+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
54+
<utrecht-paragraph>- fake list item</utrecht-paragraph>
55+
<utrecht-heading level="2">Unordered List example</utrecht-heading>
56+
<utrecht-unordered-list>
57+
<utrecht-unordered-list-item
58+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
59+
>
60+
<utrecht-unordered-list-item
61+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
62+
>
63+
<utrecht-unordered-list-item
64+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-unordered-list-item
65+
>
66+
</utrecht-unordered-list>
67+
<utrecht-heading level="2">Ordered List example</utrecht-heading>
68+
<utrecht-ordered-list>
69+
<utrecht-ordered-list-item
70+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
71+
>
72+
<utrecht-ordered-list-item
73+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
74+
>
75+
<utrecht-ordered-list-item
76+
><utrecht-paragraph>actual list item</utrecht-paragraph></utrecht-ordered-list-item
77+
>
78+
</utrecht-ordered-list>
79+
</template>
80+
</example-editor>
81+
<div><ol id="error-list"></ol></div>
82+
</div>
83+
</body>
84+
</html>

‎packages/example-editor/package.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "@frameless/example-editor",
3+
"author": "Frameless",
4+
"description": "Rich text editor with NL Design System components",
5+
"license": "SEE LICENSE IN LICENSE.md",
6+
"keywords": [
7+
"nl-design-system"
8+
],
9+
"private": true,
10+
"repository": {
11+
"type": "git+ssh",
12+
"url": "git@github.com:frameless/theme-builder.git",
13+
"directory": "packages/example-editor"
14+
},
15+
"version": "0.0.0",
16+
"scripts": {
17+
"build": "tsc && vite build --base=\"${BASE_URL:=\"/\"}\"",
18+
"dev": "vite",
19+
"preview": "vite preview"
20+
},
21+
"devDependencies": {
22+
"typescript": "5.8.2",
23+
"vite": "6.2.0"
24+
},
25+
"dependencies": {
26+
"@tiptap/core": "2.11.7",
27+
"@tiptap/pm": "2.11.7",
28+
"@utrecht/web-component-library-stencil": "3.4.0",
29+
"prosemirror-model": "1.25.1"
30+
}
31+
}

packages/opengemeenten-theme/src/utrecht-heading.mjs renamed to packages/example-editor/src/custom-element/utrecht-heading.mjs

File renamed without changes.

packages/opengemeenten-theme/src/utrecht-ordered-list-item.mjs renamed to packages/example-editor/src/custom-element/utrecht-ordered-list-item.mjs

File renamed without changes.

packages/opengemeenten-theme/src/utrecht-ordered-list.mjs renamed to packages/example-editor/src/custom-element/utrecht-ordered-list.mjs

File renamed without changes.

packages/opengemeenten-theme/src/utrecht-paragraph.mjs renamed to packages/example-editor/src/custom-element/utrecht-paragraph.mjs

File renamed without changes.

packages/opengemeenten-theme/src/utrecht-unordered-list-item.mjs renamed to packages/example-editor/src/custom-element/utrecht-unordered-list-item.mjs

File renamed without changes.

packages/opengemeenten-theme/src/utrecht-unordered-list.mjs renamed to packages/example-editor/src/custom-element/utrecht-unordered-list.mjs

File renamed without changes.

packages/opengemeenten-theme/src/utrecht-table.mjs renamed to packages/example-editor/src/index.ts

File renamed without changes.

packages/opengemeenten-theme/src/editor/document.mjs renamed to packages/example-editor/src/tiptap/document.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Node } from 'https://esm.sh/@tiptap/core';
1+
import { Node } from '@tiptap/core';
22

33
export const Document = Node.create({
44
content: 'block+',

0 commit comments

Comments
 (0)