build editor

front/js/svelte/libs/CodemirrorMarkdown.svelte

@@ -0,0 +1,61 @@
+<script>
+
+    // https://codesandbox.io/s/codemirror-remark-editor-4m4z9?file=/src/CodeEditor.js:374-387
+    import {onMount, onDestroy} from "svelte";
+    import {basicSetup, EditorView} from "codemirror";
+    import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+    import {EditorState, Compartment} from "@codemirror/state";
+    import {keymap} from "@codemirror/view";
+    import {indentWithTab} from "@codemirror/commands";
+    import {markdown} from "@codemirror/lang-markdown";
+    import {lintKeymap} from "@codemirror/lint";
+
+    let parentElement;
+    let codeMirrorView;
+    export let value;
+    export let editable = true;
+
+    onMount(() => {
+        let language = new Compartment();
+        let tabSize = new Compartment();
+
+        let state = EditorState.create({
+            doc: value,
+            extensions: [
+                basicSetup,
+                keymap.of([
+                    indentWithTab,
+                    ...lintKeymap,
+                    ...completionKeymap
+                ]),
+                language.of(markdown()),
+                markdown(),
+                autocompletion(),
+                tabSize.of(EditorState.tabSize.of(4)),
+                basicSetup,
+                EditorView.editable.of(editable),
+                EditorView.updateListener.of(function (e) {
+                    if (e.docChanged) {
+                        value = e.state.doc.toString();
+                    }
+                }),
+                EditorView.lineWrapping
+
+            ],
+        });
+
+
+        codeMirrorView = new EditorView({
+            state,
+            parent: parentElement,
+        });
+    });
+
+    onDestroy(() => {
+        if (codeMirrorView) {
+            codeMirrorView.destroy();
+        }
+    });
+</script>
+
+<div class="is-editable-{editable}" bind:this={parentElement}/>

front/js/svelte/records/FormField.svelte

@@ -15,6 +15,7 @@
     import Datetime from "./elements/Datetime.svelte";
     import RichEditor from "./elements/RichEditor.svelte";
     import Json from "./elements/JSON.svelte";
+    import Markdown from "./elements/Markdown.svelte";
     import FieldHeader from "./elements/FieldHeader.svelte";
     import ReferenceTable from "./elements/ReferenceTable.svelte";
     import ReferenceTags from "./elements/ReferenceTags.svelte";
@@ -32,6 +33,7 @@
         datetime: Datetime,
         uuid: UUID,
         json: Json,
+        markdown: Markdown,
     };
 
     export let field;

front/js/svelte/records/Graph.svelte

@@ -49,9 +49,9 @@
 
             let schema = channel.schemas.find((s) => s.name === record.schema);
             let edgeField = findEdgeField(schema,edge.field);
-            // let schemaField = edge.targetSchema + edgeField;
-            let schemaField = edge.targetSchema + edgeField;
 
+            // let schemaField = edge.targetSchema + edgeField;
+            let schemaField = edgeField.name + edge.targetSchema;
 
             if (!carry[schemaField]) {
                 carry[schemaField] = {
@@ -67,7 +67,6 @@
                 carry[schemaField].nodes.push(arecord);
                 carry[schemaField].nodes = uniqBy(carry[schemaField].nodes,"id");
             }
-
             return carry;
         }, {});
 </script>

front/js/svelte/records/block/Block.svelte

@@ -11,7 +11,6 @@
     export let value = [];
     export let graph;
     let blockSchema = channel.schemas.find((s) => s.name === field.schema);
-
 </script>
 
 

front/js/svelte/records/block/BlockButtons.svelte

@@ -2,11 +2,10 @@
     import Icon from "../../common/Icon.svelte";
     import {insertBlock} from "./block";
 
-    export let blockId;
+    export let blockId = "";
     export let blockData;
     export let blockSchema;
     $: showOptions = false;
-    let validUis = ["heading", "textarea", "rich", "reference"];
 
     function createBlock(e, ui) {
         e.preventDefault();

front/js/svelte/records/block/BlockElements.svelte

@@ -2,6 +2,7 @@
     import Heading from "./elements/Heading.svelte";
     import Textarea from "./elements/Textarea.svelte";
     import Rich from "./elements/Rich.svelte";
+    import Markdown from "./elements/Markdown.svelte";
     import Reference from "./elements/Reference.svelte";
     import Icon from "../../common/Icon.svelte";
     import {insertBlock} from "./block";
@@ -125,6 +126,10 @@
         <Rich
                 bind:block={block}
         />
+    {:else if block.meta.info.name === "markdown"}
+        <Markdown
+                bind:block={block}
+        />
     {:else if block.meta.info.name === "file"}
         <File
                 {record}

front/js/svelte/records/block/elements/Markdown.svelte

@@ -0,0 +1,15 @@
+<script>
+    import Codemirror from "../../../libs/CodemirrorMarkdown.svelte";
+
+
+    export let block;
+    // export let id;
+
+</script>
+
+<div class="mb-3">
+
+    <Codemirror bind:value={block.value}  />
+
+</div>
+

front/js/svelte/records/elements/Markdown.svelte

@@ -0,0 +1,24 @@
+<script>
+    import Codemirror from "../../libs/CodemirrorMarkdown.svelte";
+    import { getErrorMessage } from "./errorMessage";
+
+
+    export let value;
+    export let field;
+    export let isCreateMode;
+    // export let id;
+    export let validationErrors;
+    $: errorMessage = getErrorMessage(validationErrors, field.name);
+    
+</script>
+
+<div class="mb-3">
+    
+    <Codemirror bind:value editable={!field.readonly || isCreateMode} />
+
+    {#if errorMessage}
+        <div class="invalid-feedback d-block">
+            {errorMessage}
+        </div>
+    {/if}
+</div>