@functionalcms/svelte-components 5.10.0 → 5.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/components/form/Editor.svelte +93 -86
  2. package/dist/components/form/SmartForm.svelte +2 -4
  3. package/package.json +1 -1
package/dist/components/form/Editor.svelte CHANGED
@@ -1,102 +1,109 @@
1
1
  <script lang="ts">
2
- import {
3
- Editor,
4
- rootCtx,
5
- commandsCtx,
6
- defaultValueCtx,
7
- } from "@milkdown/kit/core";
8
- import { commonmark } from "@milkdown/kit/preset/commonmark";
9
- import { history } from "@milkdown/kit/plugin/history";
10
- import { nord } from "@milkdown/theme-nord";
11
- import {
12
- wrapInHeadingCommand,
13
- toggleStrongCommand,
14
- toggleEmphasisCommand,
15
- wrapInBulletListCommand,
16
- turnIntoTextCommand,
17
- } from "@milkdown/kit/preset/commonmark";
18
- import { getHTML } from "@milkdown/kit/utils";
19
- import { listener, listenerCtx } from "@milkdown/kit/plugin/listener";
20
- import { Button, ButtonGroup } from "@functionalcms/svelte-components";
2
+ import { Editor, rootCtx, commandsCtx, defaultValueCtx } from '@milkdown/kit/core';
3
+ import { commonmark } from '@milkdown/kit/preset/commonmark';
4
+ import { history } from '@milkdown/kit/plugin/history';
5
+ import { nord } from '@milkdown/theme-nord';
6
+ import {
7
+ wrapInHeadingCommand,
8
+ toggleStrongCommand,
9
+ toggleEmphasisCommand,
10
+ wrapInBulletListCommand,
11
+ turnIntoTextCommand
12
+ } from '@milkdown/kit/preset/commonmark';
13
+ import { getHTML } from '@milkdown/kit/utils';
14
+ import { listener, listenerCtx } from '@milkdown/kit/plugin/listener';
15
+ import { Button, ButtonGroup } from '@functionalcms/svelte-components';
21
16
 
22
- interface Props {
23
- initialValue: string;
24
- markdown: string;
25
- html: string;
26
- }
17
+ interface Props {
18
+ id: string;
19
+ initialValue: string;
20
+ markdown: string;
21
+ html: string;
22
+ type: 'markdown' | 'html';
23
+ }
27
24
 
28
- let { initialValue = "", markdown = $bindable(initialValue), html = $bindable(initialValue) }: Partial<Props> = $props();
25
+ let {
26
+ id = '',
27
+ initialValue = '',
28
+ markdown = $bindable(initialValue),
29
+ html = $bindable(initialValue),
30
+ type = 'markdown'
31
+ }: Partial<Props> = $props();
29
32
 
30
- let editorInstance: Editor | null = null;
33
+ let editorInstance: Editor | null = null;
31
34
 
32
- const applyCommand = (command: any, params?: any) => {
33
- if (!editorInstance) return;
35
+ const applyCommand = (command: any, params?: any) => {
36
+ if (!editorInstance) return;
34
37
 
35
- try {
36
- editorInstance.action((ctx) => {
37
- const commandManager = ctx.get(commandsCtx);
38
- commandManager.call(command, params);
39
- });
40
- } catch (e) {
41
- console.error("Command error:", e);
42
- }
43
- };
38
+ try {
39
+ editorInstance.action((ctx) => {
40
+ const commandManager = ctx.get(commandsCtx);
41
+ commandManager.call(command, params);
42
+ });
43
+ } catch (e) {
44
+ console.error('Command error:', e);
45
+ }
46
+ };
44
47
 
45
- const setHeadingCommand = (level: 1 | 2 | 3 | 4 | 5 | 6) =>
46
- applyCommand(wrapInHeadingCommand.key, level);
47
- const makeBold = () => applyCommand(toggleStrongCommand.key);
48
- const makeItalic = () => applyCommand(toggleEmphasisCommand.key);
49
- const makeList = () => applyCommand(wrapInBulletListCommand.key);
50
- const clearFormatting = () => applyCommand(turnIntoTextCommand.key);
48
+ const setHeadingCommand = (level: 1 | 2 | 3 | 4 | 5 | 6) =>
49
+ applyCommand(wrapInHeadingCommand.key, level);
50
+ const makeBold = () => applyCommand(toggleStrongCommand.key);
51
+ const makeItalic = () => applyCommand(toggleEmphasisCommand.key);
52
+ const makeList = () => applyCommand(wrapInBulletListCommand.key);
53
+ const clearFormatting = () => applyCommand(turnIntoTextCommand.key);
51
54
 
52
- function editor(dom) {
53
- const MakeEditor = Editor.make()
54
- .config((ctx) => {
55
- ctx.set(rootCtx, dom);
56
- ctx.set(defaultValueCtx, initialValue);
57
- ctx.get(listenerCtx).markdownUpdated((ctx, markdownContent) => {
58
- markdown = markdownContent;
59
- html = getHTML()(ctx);
60
- });
61
- })
62
- .config(nord)
63
- .use(commonmark)
64
- .use(listener)
65
- .use(history)
66
- .create();
67
- MakeEditor.then((editor) => {
68
- editorInstance = editor;
69
- });
70
- }
55
+ let value = $state(initialValue);
56
+
57
+ function editor(dom) {
58
+ const MakeEditor = Editor.make()
59
+ .config((ctx) => {
60
+ ctx.set(rootCtx, dom);
61
+ ctx.set(defaultValueCtx, initialValue);
62
+ ctx.get(listenerCtx).markdownUpdated((ctx, markdownContent) => {
63
+ markdown = markdownContent;
64
+ html = getHTML()(ctx);
65
+ value = type === 'markdown' ? markdownContent : html;
66
+ });
67
+ })
68
+ .config(nord)
69
+ .use(commonmark)
70
+ .use(listener)
71
+ .use(history)
72
+ .create();
73
+ MakeEditor.then((editor) => {
74
+ editorInstance = editor;
75
+ });
76
+ }
71
77
  </script>
72
78
 
73
79
  <div class="editor-container">
74
- <ButtonGroup>
75
- <Button onclick={() => setHeadingCommand(1)}>H1</Button>
76
- <Button onclick={() => setHeadingCommand(2)}>H2</Button>
77
- <Button onclick={() => setHeadingCommand(3)}>H3</Button>
78
- <Button onclick={() => setHeadingCommand(4)}>H4</Button>
79
- <Button onclick={() => setHeadingCommand(5)}>H5</Button>
80
- <Button onclick={() => setHeadingCommand(6)}>H6</Button>
81
- <Button onclick={() => makeBold()}><strong>B</strong></Button>
82
- <Button onclick={() => makeItalic()}><em>I</em></Button>
83
- <Button onclick={() => makeList()}>List</Button>
84
- <Button onclick={() => clearFormatting()}>Clear</Button>
85
- </ButtonGroup>
86
- <div class="editor-body" use:editor></div>
80
+ <ButtonGroup>
81
+ <Button onclick={() => setHeadingCommand(1)}>H1</Button>
82
+ <Button onclick={() => setHeadingCommand(2)}>H2</Button>
83
+ <Button onclick={() => setHeadingCommand(3)}>H3</Button>
84
+ <Button onclick={() => setHeadingCommand(4)}>H4</Button>
85
+ <Button onclick={() => setHeadingCommand(5)}>H5</Button>
86
+ <Button onclick={() => setHeadingCommand(6)}>H6</Button>
87
+ <Button onclick={() => makeBold()}><strong>B</strong></Button>
88
+ <Button onclick={() => makeItalic()}><em>I</em></Button>
89
+ <Button onclick={() => makeList()}>List</Button>
90
+ <Button onclick={() => clearFormatting()}>Clear</Button>
91
+ </ButtonGroup>
92
+ <div class="editor-body" use:editor></div>
93
+ <input type="hidden" name={id} bind:value />
87
94
  </div>
88
95
 
89
96
  <style>
90
- .editor-container {
91
- display: flex;
92
- flex-direction: column;
93
- gap: 0.5rem;
94
- border: 2px solid black;
95
- border-radius: 5px;
96
- }
97
+ .editor-container {
98
+ display: flex;
99
+ flex-direction: column;
100
+ gap: 0.5rem;
101
+ border: 2px solid black;
102
+ border-radius: 5px;
103
+ }
97
104
 
98
- .editor-body {
99
- background: white;
100
- height: 100%;
101
- }
105
+ .editor-body {
106
+ background: white;
107
+ height: 100%;
108
+ }
102
109
  </style>
package/dist/components/form/SmartForm.svelte CHANGED
@@ -237,15 +237,13 @@
237
237
  {#snippet renderMdEditory(field: MarkdownEditorField)}
238
238
  <Label for={field.id} class={field.class}>{field.label}</Label>
239
239
  {#key field.id}
240
- <Editor initialValue={field.value} bind:markdown={field.value} />
241
- <input type="hidden" name={field.id} bind:value={field.value} />
240
+ <Editor initialValue={field.value} bind:markdown={value} />
242
241
  {/key}
243
242
  {/snippet}
244
243
  {#snippet renderHtmlEditory(field: HtmlEditorField)}
245
244
  <Label for={field.id} class={field.class}>{field.label}</Label>
246
245
  {#key field.id}
247
- <Editor initialValue={field.value} bind:html={field.value} />
248
- <input type="hidden" name={field.id} bind:value={field.value} />
246
+ <Editor initialValue={field.value} bind:html={value} />
249
247
  {/key}
250
248
  {/snippet}
251
249
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@functionalcms/svelte-components",
3
- "version": "5.10.0",
3
+ "version": "5.10.3",
4
4
  "license": "MIT",
5
5
  "watch": {
6
6
  "build": {