@functionalcms/svelte-components 5.10.0 → 5.10.4

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 +0 -2
  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
@@ -238,14 +238,12 @@
238
238
  <Label for={field.id} class={field.class}>{field.label}</Label>
239
239
  {#key field.id}
240
240
  <Editor initialValue={field.value} bind:markdown={field.value} />
241
- <input type="hidden" name={field.id} bind:value={field.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
246
  <Editor initialValue={field.value} bind:html={field.value} />
248
- <input type="hidden" name={field.id} bind:value={field.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.4",
4
4
  "license": "MIT",
5
5
  "watch": {
6
6
  "build": {