@live-change/wysiwyg-frontend 0.2.9 → 0.2.11

package/front/src/DocumentEditorTest.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <DocumentEditor targetType="Example" :target="target" :type="'rich'" :purpose="'test'"
+  <div class="wysiwyg">
+    <DocumentEditor targetType="Example" :target="target" :type="'page'" :purpose="'test'"
                     :initialContent="emptyContent"
                     :config="contentConfig" />
   </div>
@@ -10,7 +10,7 @@
 
   import DocumentEditor from "./components/DocumentEditor.vue"
   import { ref } from 'vue'
-  import { basicMarks, messageNodes, richEditorNodes } from "./components/contentConfig.js"
+  import { basicMarks, messageNodes, richEditorNodes, pageNodes } from "./components/contentConfig.js"
   import { toRefs } from '@vueuse/core'
 
   const props = defineProps({
@@ -28,15 +28,14 @@
     },
     nodes: {
       //...messageNodes,
-      ...richEditorNodes
+      //...richEditorNodes
+      ...pageNodes
     }
   }
 
-  const document = 'testDocument'
-
   const emptyContent = {
     "type": "doc",
-    "content": [].concat(new Array(2).fill(
+    "content": [
       {
         "type": "paragraph",
         "content": [
@@ -54,12 +53,76 @@
             "text": "est"
           }
         ]
+      },
+      {
+        "type": "component",
+        "attrs": {
+          "is": "card",
+          "attrs": {
+            "class": "surface-card px-3 shadow-2 w-full f p-2"
+          }
+        },
+        "content": [
+          {
+            "type": "paragraph",
+            "content": [
+              {
+                "type": "text",
+                "text": "test"
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "type": "paragraph",
+        "content": [
+          {
+            "type": "text",
+            "text": "test"
+          },
+          {
+            "type": "text",
+            "marks": [
+              {
+                "type": "bold"
+              }
+            ],
+            "text": "est"
+          }
+        ]
+      },
+      {
+        "type": "component",
+        "attrs": {
+          "is": "card",
+          "attrs": {
+            "class": "surface-card py-1 px-3 shadow-2 w-full"
+          }
+        },
+        "content": [
+          {
+            "type": "paragraph",
+            "content": [
+              {
+                "type": "text",
+                "text": "test"
+              }
+            ]
+          }
+        ]
       }
-    ))
+    ]
   }
 
 </script>
 
-<style scoped>
+<style lang="scss">
+  .wysiwyg {
+
+    .ProseMirror:focus {
+      outline: none;
+    }
 
+  }
 </style>

package/front/src/DocumentPreviewTest.vue

@@ -1,11 +1,41 @@
 <template>
-
+  <ContentView :content="document.content" :config="contentConfig" class="w-full" />
+  <pre>{{ JSON.stringify(document.content, null, "  ") }}</pre>
 </template>
 
-<script>
-export default {
-  name: "DocumentPreviewTest"
-}
+<script setup>
+  import ContentView from "./components/ContentView.js"
+  import { ref } from 'vue'
+
+  const props = defineProps({
+    target: {
+      type: String,
+      default: 'one'
+    }
+  })
+
+  import { basicMarks, messageNodes, richEditorNodes, pageNodes } from "./components/contentConfig.js"
+
+  const contentConfig = {
+    marks: {
+      ...basicMarks
+    },
+    nodes: {
+      //...messageNodes,
+      //...richEditorNodes,
+      ...pageNodes
+    }
+  }
+
+  import { path, live, useApi } from '@live-change/vue3-ssr'
+  const api = useApi()
+  const p = path()
+
+  const document = await live(
+    p.prosemirror.document({ targetType: 'Example', target: props.target })
+  )
+
+
 </script>
 
 <style scoped>

package/front/src/components/ComponentComponent.vue

@@ -0,0 +1,81 @@
+<template>
+  <node-view-wrapper>
+    <ComponentEditor v-bind="{ ...attrs, class: ['relative', attrs.class] }">
+      <node-view-content class="content" />
+      <div class="absolute top-0 right-0 pr-4 max-h-0 align-items-center z-5 edit-buttons ">
+        <Button icon="pi pi-eye"
+                :class="[
+                  'p-button p-button-icon-only p-button-rounded mr-0',
+                  selectedEditor != 'style' ? 'p-button-success' : 'p-button-secondary'
+                ]"
+                style="transform: scale(0.8)"
+                @click="(event) => toggleEditor('style', event)" />
+        <Button icon="pi pi-cog"
+                :class="[
+                  'p-button p-button-icon-only p-button-rounded mr-0',
+                  selectedEditor != 'settings' ? 'p-button-warning' : 'p-button-secondary'
+                ]"
+                style="transform: scale(0.8)"
+                @click="(event) => toggleEditor('settings', event)"/>
+        <Button icon="pi pi-trash"
+                class="p-button p-button-icon-only p-button-rounded p-button-danger"
+                style="transform: scale(0.8)"
+                @click="() => props.deleteNode()" />
+      </div>
+      <div class="absolute pointer-events-none border-2 border-dashed z-9"
+           :class="selectedEditor == 'style' ? 'border-blue-400' : 'border-yellow-400'"
+           style="top: -10px; left: -10px; width: auto; height: auto; right: -10px; bottom: -10px"
+           v-if="selectedEditor"></div>
+    </ComponentEditor>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+  import Button from "primevue/button"
+
+  import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+  import components from "./components.js";
+
+  import { inject, computed, getCurrentInstance } from "vue"
+
+  const props = defineProps(nodeViewProps)
+
+  const is = computed(() => props.node.attrs.is)
+  const attrs = computed(() => props.node.attrs.attrs)
+
+  const ComponentEditor = components[props.node.attrs.is].editor
+
+  const uid = getCurrentInstance().uid
+
+  const nodeControl = computed(() => ({
+    uid,
+    updateAttributes: props.updateAttributes,
+    deleteNode: props.deleteNode,
+    is: props.node.attrs.is,
+    attrs: props.node.attrs.attrs
+  }))
+
+  const editorControl = inject("componentEditorControl")
+
+  function toggleEditor(type, event) {
+    editorControl.toggleEditor(type, nodeControl, event)
+  }
+
+  const selectedEditor = computed(() =>{
+    console.log('EC', editorControl.componentControl.value?.nodeControl?.value.uid, uid)
+    return editorControl.componentControl.value?.nodeControl?.value?.uid === uid
+      ? editorControl.componentControl.value?.type
+      : null
+  })
+
+</script>
+
+<style lang="scss">
+  .edit-buttons {
+    display: none;
+  }
+  .show-edit-buttons .edit-buttons {
+    display: flex;
+  }
+
+</style>

package/front/src/components/ComponentNode.js

@@ -0,0 +1,74 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import ComponentComponent from "./ComponentComponent.vue"
+
+export default Node.create({
+  name: 'component',
+  group: 'block',
+  //atom: true,
+  inline: false,
+  selectable: true,
+  draggable: true,
+  content: 'block*',
+  marks: '',
+
+  addAttributes() {
+    return {
+      is: {
+        default: 'card',
+        renderHTML: attributes => {
+          return {
+            'data-is': attributes.is
+          }
+        },
+      },
+      attrs: {
+        default: {},
+        renderHTML: attributes => {
+          const htmlAttrs = {}
+          const attrs = attributes.attrs
+          for(let key in this.options) {
+            htmlAttrs[`data-attr-${key}`] = attrs[key]
+          }
+          return htmlAttrs
+        },
+      }
+    }
+  },
+
+  /*parseHTML() {
+    return [
+      {
+        tag: this.options.allowBase64
+            ? 'img[src]'
+            : 'img[src]:not([src^="data:"])',
+      },
+    ]
+  },*/
+
+  renderHTML({ HTMLAttributes }) {
+    /*const htmlAttrs = {}
+    const attrs = this.options.attrs
+    for(let key in this.options) {
+      htmlAttrs[`data-attr-${key}`] = attrs[key]
+    }
+    htmlAttrs['data-is'] = this.options.is
+    return ['component', mergeAttributes(HTMLAttributes, htmlAttrs)]*/
+    return ['component', HTMLAttributes]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(ComponentComponent)
+  },
+
+  addCommands() {
+    return {
+      setImage: options => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options
+        })
+      }
+    }
+  }
+})

package/front/src/components/ComponentsMenu.vue

@@ -0,0 +1,108 @@
+<template>
+  <div>
+    <div class="px-2 pb-2">
+      <span class="p-input-icon-left w-full flex">
+          <i class="pi pi-search flex-shrink-0" />
+          <InputText type="text" v-model="searchQuery" placeholder="Search" class="flex-grow-1" v-focus />
+      </span>
+    </div>
+    <div class="overflow-auto" style="max-height: 75vh">
+  <!--    <div v-for="i in [1,2,3,4,5,6,7,8,9,10]">-->
+        <div v-for="([ name, component ], index) in searchResults" :key="name"
+             class="flex flex-wrap relative cursor-pointer hover:surface-100"
+             @click="() => emit('selected', name, component)" >
+          <div class="w-3 ml-2 mr-2 my-1" style="aspect-ratio: 1/1">
+            <div class="pointer-events-none w-6 absolute p-1"
+                 style="aspect-ratio: 1/1; transform: scale(0.5); transform-origin: 0 0;">
+              <ContentView :config="config" :content="getTestContent(name, component)" style="aspect-ratio: 1/1" />
+            </div>
+          </div>
+          <div class="ml-2">
+            <h3>{{ name[0].toUpperCase() + name.slice(1) }}</h3>
+            <p>{{ component.description }}</p>
+          </div>
+        </div>
+  <!--    </div>-->
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InputText from "primevue/inputtext"
+
+  import ContentView from "./ContentView.js"
+  import components from "./components.js"
+
+  import { ref, computed } from 'vue'
+
+  const props = defineProps({
+    config: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { config } = props
+
+  const emit = defineEmits(['selected'])
+
+  const searchQuery = ref('')
+
+  const searchResults = computed(() => {
+    const query = searchQuery.value.toLowerCase()
+    if(!query) return Object.entries(components)
+    const byName = Object.entries(components).filter(([name, component]) => {
+      return name.toLowerCase().includes(query)
+    })
+    const byDescription = Object.entries(components).filter(([name, component]) => {
+      return (component.description || '').toLowerCase().includes(query)
+    }).filter(([name, component]) => !byName.find(([name2]) => name == name2))
+    return [...byName, ...byDescription]
+  })
+
+  function getTestContent(name, component) {
+    return {
+      "type": 'component',
+      "attrs": {
+        "is": name,
+        "attrs": {
+          ...component.initialAttrs,
+          ...component.previewAttrs
+        }
+      },
+      "content": component.previewContent ? [
+        {
+          "type": "heading",
+          "attrs": {
+            "level": 3
+          },
+          "content": [
+            {
+              "type": "text",
+              "text": name[0].toUpperCase() + name.slice(1)
+            }
+          ]
+        },
+        {
+          "type": "paragraph",
+          "content": [
+            {
+              "type": "text",
+              "text": component.description
+            }
+          ]
+        }
+      ] : [
+        {
+          "type": "text",
+          "text": component.description
+        }
+      ]
+    }
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/ContentView.js

@@ -9,9 +9,9 @@ function renderNode(node, r, marks, nodes) {
 }
 
 function ContentView(props, context) {
-  const { content, config } = props
+  let { content, config } = props
   if(content) {
-    const doc = JSON.parse(content)
+    const doc = typeof content == 'string' ? JSON.parse(content) : content
     const r = nodes => nodes?.map(n => renderNode(n, r, config.marks, config.nodes))
     return renderNode(doc, r, config.marks, config.nodes)
   }

package/front/src/components/DocumentEditor.vue

@@ -3,20 +3,42 @@
     <slot v-if="editor" name="menu" :editor="editor" :saveState="saveState">
       <EditorMenu :editor="editor" :config="config" :saveState="saveState">
         <template #before="scope"><slot name="beforeMenu" v-bind="{ ...scope, editor, saveState }" /></template>
-        <template #after="scope"><slot name="afterMenu" v-bind="{ ...scope, editor, saveState }" /></template>
         <template #begin="scope"><slot name="menuBegin" v-bind="{ ...scope, editor, saveState }" /></template>
-        <template #end="scope"><slot name="menuEnd" v-bind="{ ...scope, editor, saveState }" /></template>
+        <template #end="scope">
+          <slot name="menuEnd" v-bind="{ ...scope, editor, saveState }" />
+          <Button v-if="config.nodes.component" label="Edit Buttons"
+                  :class="[
+                    'p-button-sm p-button-primary inline-block mr-1 mb-1', { 'p-button-outlined': !editButtons }
+                    ]"
+                  @click="toggleEditButtons" />
+        </template>
+        <template #after="scope">
+          <div v-if="componentControl"
+               class="surface-card p-1 shadow-2 border-round">
+            <StyleEditor v-if="componentControl.type == 'style'" :nodeControl="componentControl.nodeControl"
+                         :key="componentControl.uid" />
+            <SettingsEditor v-if="componentControl.type == 'settings'" :nodeControl="componentControl.nodeControl"
+                            :key="componentControl.uid" />
+          </div>
+          <slot name="afterMenu" v-bind="{ ...scope, editor, saveState }" />
+        </template>
       </EditorMenu>
     </slot>
-    <editor-content :editor="editor" class="content" />
+    <editor-content :editor="editor" :class="[content, { 'show-edit-buttons': editButtons }]" />
   </div>
 </template>
 
 <script setup>
+  import Button from "primevue/button"
+
+  import StyleEditor from "./StyleEditor.vue";
+  import SettingsEditor from "./SettingsEditor.vue";
 
   import { useEditor, EditorContent } from '@tiptap/vue-3'
+  import { History } from '@tiptap/extension-history'
   import {
-    ref, computed, watch, provide, defineEmits, defineProps, getCurrentInstance, onUnmounted, inject, onMounted
+    ref, computed, watch, provide, defineEmits, defineProps, getCurrentInstance, onUnmounted, inject, onMounted,
+    shallowRef
   } from 'vue'
   import { toRefs, useDebounceFn } from '@vueuse/core'
   import EditorMenu from "./EditorMenu.vue"
@@ -119,6 +141,10 @@
       ProseMirrorCollab.configure({
         version: documentData.version,
         clientID
+      }),
+      History.configure({
+        depth: 100,
+        newGroupDelay: 500
       })
     ],
     onTransaction: ({ editor, transaction }) => {
@@ -134,6 +160,16 @@
     ? serializeSchema(editor.view.state.schema.spec)
     : getSchemaSpecFromConfig(props.config)
 
+  const editButtons = ref(true)
+  function toggleEditButtons() {
+    editButtons.value = !editButtons.value
+    if(!editButtons.value) {
+      componentControl.value = null
+    }
+  }
+
+  if(typeof window != 'undefined') window.schemaSpecJson = JSON.stringify(schemaSpec, null, "  ")
+
   async function save() {
     const state = editor.value.reactiveState.value
     const sendable = sendableSteps(state)
@@ -155,6 +191,21 @@
       transaction.apply(editor.value.view.state)
     }
   }
+
+  const componentControl = shallowRef()
+  provide('componentEditorControl', {
+    componentControl,
+    toggleEditor(type, nodeControl, event) {
+      const uid = nodeControl.value.uid
+      if(componentControl.value && componentControl.value.uid == uid && componentControl.value.type == type) {
+        componentControl.value = null
+      } else {
+        console.log("SET COMPONENT CONTROL", nodeControl.value)
+        componentControl.value = { type, nodeControl, uid }
+      }
+    }
+  })
+
 </script>
 
 <style scoped>

package/front/src/components/Editor.vue

@@ -15,6 +15,7 @@
 <script setup>
 
   import { useEditor, EditorContent } from '@tiptap/vue-3'
+  import { History } from '@tiptap/extension-history'
 
   import { ref, computed, watch, provide, defineEmits, defineProps } from 'vue'
   import { toRefs } from '@vueuse/core'
@@ -39,7 +40,13 @@
 
   const editor = useEditor({
     content: JSON.parse(props.modelValue),
-    extensions,
+    extensions: [
+      ...extensions,
+      History.configure({
+        depth: 100,
+        newGroupDelay: 500
+      })
+    ],
     onUpdate: ({ editor, transaction }) => {
       console.log("EDITOR UPDATE", editor, transaction)
       const editorJson = JSON.stringify(editor.getJSON())

package/front/src/components/EditorMenu.vue

@@ -76,8 +76,9 @@
         </FileInput>
   <!--    </div>-->
 
-      <Button v-if="config.nodes.component" label="Insert Component" class="p-button-sm p-button-primary"
-              @click="editor.chain().focus().setHorizontalRule().run()" />
+      <Button v-if="config.nodes.component" label="Component"
+              class="p-button-sm p-button-primary p-button-outlined inline-block mr-1 mb-1"
+              @click="openComponentMenu" />
 
       <span v-if="saveState"
             class="p-button p-component p-button-sm p-button-outlined p-button-secondary cursor-auto
@@ -98,14 +99,23 @@
 
     </div>
     <slot name="after" />
+    <OverlayPanel ref="insertComponentOverlay" style="width: 450px" :breakpoints="{'960px': '75vw'}">
+      <ComponentsMenu :config="config" @selected="(n,c) => handleComponentSelected(n,c)" />
+    </OverlayPanel>
+<!--    <div class="surface-card p-1 shadow-2" style="width: 450px">
+      <h3>components:</h3>
+      <ComponentsMenu :config="config" />
+    </div>-->
   </div>
 </template>
 
 <script setup>
   import Button from "primevue/button"
   import ProgressSpinner from "primevue/progressspinner"
+  import OverlayPanel from 'primevue/overlaypanel'
 
-  import { inject, getCurrentInstance } from "vue"
+  import ComponentsMenu from "./ComponentsMenu.vue"
+  import { inject, getCurrentInstance, ref } from "vue"
   import { toRefs } from "@vueuse/core"
   import { uploadImage } from "@live-change/image-frontend"
   import { FileInput } from "@live-change/upload-frontend"
@@ -145,7 +155,28 @@
     await upload.upload()
   }
 
-  window.editor = editor.value
+  const insertComponentOverlay = ref()
+  function openComponentMenu(event) {
+    insertComponentOverlay.value.show(event)
+  }
+  function handleComponentSelected(name, component) {
+    insertComponentOverlay.value.hide()
+    editor.value.chain().focus().insertContent({
+      type: 'component',
+      attrs: {
+        is: name,
+        attrs: component.initialAttrs
+      },
+      content: [
+        { type: 'paragraph', content: [
+            { type: 'text', text: 'test' }
+        ] }
+      ]
+    }).run()
+    //editor.value.chain().focus().setNode('component', { is: component }).run()
+  }
+
+  if(typeof window != 'undefined') window.editor = editor.value
 </script>
 
 <style scoped>

package/front/src/components/EmptyComponent.vue

@@ -0,0 +1,11 @@
+<template>
+  <h3>Empty component</h3>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/ImageNode.js

@@ -2,7 +2,6 @@ import { Node } from '@tiptap/core'
 import { VueNodeViewRenderer } from '@tiptap/vue-3'
 import ImageComponent from "./ImageComponent.vue"
 
-
 export default Node.create({
   name: 'image',
   group: 'block',

package/front/src/components/PaddingEditor.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="flex flex-row flex-wrap ">
+    <div v-for="type in paddingTypes"
+         class="flex flex-row align-items-center justify-content-start my-1"
+         style="width: 5.6em">
+      <label :for="'padding-'+type" class="mb-0 mr-1">{{ type }}</label>
+      <InputNumber v-if="props.modelValue[type] !== undefined"
+                   :inputId="'padding-'+type"
+                   class="p-inputtext-sm"
+                   inputStyle="max-width: 1.7em;"
+                   :modelValue="props.modelValue[type]"
+                   @update:modelValue="value => updatePadding(type, value)"
+                   mode="decimal"
+                   showButtons :min="-1" :max="8" />
+      <Button v-else class="p-button p-button-icon-only p-button-rounded mr-0" icon="pi pi-plus"
+              @click="ev => updatePadding(type, 1)" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InputNumber from "primevue/inputnumber"
+  import Button from "primevue/button"
+
+  const props = defineProps({
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  })
+  const emit = defineEmits(['update:modelValue'])
+
+  const paddingTypes = ['all', 'x', 'y', 'l', 'r', 't', 'b']
+
+  function updatePadding(type, value) {
+    console.log("UPDATE PADDING", type, value)
+    const newValue = { ...props.modelValue }
+    if(value < 0) {
+      delete newValue[type]
+    } else {
+      newValue[type] = value
+    }
+    emit('update:modelValue', newValue)
+  }
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/RemoteAuthority.js

@@ -117,6 +117,7 @@ class RemoteAuthority{
     debug("LOAD DOCUMENT!")
     const identifier = { targetType: this.targetType, target: this.target }
     let documentData = await this.api.get(['prosemirror', 'document', identifier])
+    console.log("DOCUMENT DATA", documentData)
     if(!documentData) {
       documentData = {
         ...identifier,

package/front/src/components/SettingsEditor.vue

@@ -0,0 +1,10 @@
+<template>
+  <h2>Settings editor</h2>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/StyleEditor.vue

@@ -0,0 +1,179 @@
+<template>
+<!--  <pre>{{ JSON.stringify(classInfo, null, "  ") }}</pre>-->
+  <div class="flex flex-column flex-wrap w-full">
+    <div v-if="editingPadding">
+      <div class="flex flex-row align-items-center mb-2">
+        <label class="mr-3" style="width: 4em">Padding:</label>
+        <PaddingEditor :modelValue="classInfo.padding"
+                       @update:modelValue="p => handleClassInfoUpdate({ padding: p })" />
+      </div>
+      <div class="flex flex-row align-items-center">
+        <label class="mr-3" style="width: 4em">Margin:</label>
+        <PaddingEditor :modelValue="classInfo.margin"
+                       @update:modelValue="p => handleClassInfoUpdate({ margin: p })" />
+      </div>
+    </div>
+    <div class="flex flex-column md:flex-row">
+      <div class="flex-1 mr-2 flex flex-column">
+        <div class="flex flex-row align-items-center flex-shrink-0">
+          <label class="my-2 flex-grow-1">Classes:</label>
+          <div class="flex flex-row align-items-center mr-4">
+            <i class="pi pi-arrows-alt" style="font-size: 1.2rem"></i>
+            <InputSwitch v-model="editingPadding" class="ml-2" />
+          </div>
+        </div>
+        <AutoComplete :modelValue="classInfo.list"
+                      @update:modelValue="l => handleClassInfoUpdate({ list: l })"
+                      :separator="/ /" :multiple="true" :suggestions="classSuggestions"
+                      @complete="ev => searchClasses(ev)"
+                      class="autocomplete-w-full flex-grow-1" />
+      </div>
+      <div class="flex-1 flex flex-column">
+        <div class="flex flex-row flex-shrink-0">
+          <label class="my-2 flex-grow-1">Style:</label>
+        </div>
+        <prism-editor v-if="isMounted"
+                      class="style-editor p-inputtext flex-grow-1" :highlight="highlightCss"
+                      :style="{ height: (nodeStyleLines * 1.35 + 1.1) + 'em' }"
+                      :modelValue="nodeStyle" @update:modelValue="handleStyleUpdate"
+                      :readonly="false" :line-numbers="nodeStyleLines > 1" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import AutoComplete from "primevue/autocomplete"
+  import InputSwitch from 'primevue/inputswitch';
+
+  import PaddingEditor from "./PaddingEditor.vue"
+
+  import 'vue-prism-editor/dist/prismeditor.min.css'
+  import 'prismjs/themes/prism-coy.css'
+  import * as Prism from 'prismjs/components/prism-core'
+  import 'prismjs/components/prism-css'
+
+  import { PrismEditor } from 'vue-prism-editor'
+
+  import {ref, computed, watch, provide, defineEmits, defineProps, onMounted} from 'vue'
+  import { toRefs } from '@vueuse/core'
+
+  const isMounted = ref(false)
+  onMounted(() => isMounted.value = true)
+
+  const props = defineProps({
+    nodeControl: {
+      type: Object,
+      required: true
+    }
+  })
+
+  const { nodeControl } = toRefs(props)
+
+  const editingPadding = ref(false)
+
+  function extract(info, regex, setter) {
+    const rest = []
+    const list = info.list
+    for(let i = 0; i < list.length; i++) {
+      const match = list[i].match(regex)
+      if(match) setter(...match.slice(1))
+        else rest.push(list[i])
+    }
+    info.list = rest
+  }
+
+  function extractClasses(info) {
+    info.padding = { }
+    if(editingPadding.value) {
+      extract(info, /^p([xyltrb])?-(\d+)$/, (dir, size) => {
+        if (dir) info.padding[dir] = size
+        else info.padding.all = size
+      })
+      info.margin = {}
+      extract(info, /^m([xyltrb])?-(\d+)$/, (dir, size) => {
+        if (dir) info.margin[dir] = size
+        else info.margin.all = size
+      })
+    }
+  }
+  function recombinePadding(list, padding, prefix = 'p') {
+    if(padding.all !== undefined) list.push(`${prefix}-${padding.all}`)
+    if(padding.x !== undefined) list.push(`${prefix}x-${padding.x}`)
+    if(padding.y !== undefined) list.push(`${prefix}y-${padding.y}`)
+    if(padding.t !== undefined) list.push(`${prefix}t-${padding.t}`)
+    if(padding.r !== undefined) list.push(`${prefix}r-${padding.r}`)
+    if(padding.b !== undefined) list.push(`${prefix}b-${padding.b}`)
+    if(padding.l !== undefined) list.push(`${prefix}l-${padding.l}`)
+  }
+  function recombineClasses(info) {
+    const { padding, margin, list } = info
+    if(editingPadding.value) {
+      recombinePadding(list, padding, 'p')
+      recombinePadding(list, margin, 'm')
+    }
+  }
+
+  const insertableClasses = ['flex', 'flex-grow-1']
+  const nodeClass = computed(() => {
+    console.log("nodeControl", nodeControl.value)
+    return nodeControl.value.attrs.class
+  })
+  const classInfo = computed(() => {
+    const list = nodeClass.value ? nodeClass.value.split(' ') : []
+    const info = { list }
+    extractClasses(info)
+    return info
+  })
+  const classSuggestions = ref()
+  function searchClasses(event) {
+    const query = event.query.toLowerCase()
+    console.log("SEARCH CLASSES", query)
+    classSuggestions.value = [
+      ...(insertableClasses.find(c => c == event.query) ? [] : [event.query]),
+      ...(insertableClasses.filter((c) => {
+        return c.toLowerCase().startsWith(query)
+      }))
+    ]
+  }
+  function handleClassInfoUpdate(change) {
+    let info = JSON.parse(JSON.stringify(classInfo.value))
+    info = { ...info, ...change }
+    recombineClasses(info)
+    console.log("INFO", info)
+    nodeControl.value.updateAttributes({ attrs: {
+      ...nodeControl.value.attrs,
+      class: info.list.join(' ')
+    }})
+  }
+
+  const nodeStyle = computed(() => {
+    return nodeControl.value.attrs.style
+  })
+  const nodeStyleLines = computed(() => (nodeStyle.value || '').split('\n').length)
+  function highlightCss(code) {
+    return Prism.highlight(code, Prism.languages.css, "css")
+  }
+  function handleStyleUpdate(style) {
+    console.log("NC", nodeControl.value)
+    nodeControl.value.updateAttributes({ attrs: {
+      ...nodeControl.value.attrs,
+      style
+    }})
+  }
+
+</script>
+
+<style lang="scss">
+  .autocomplete-w-full > ul {
+    width: 100%;
+  }
+  .prism-editor__textarea {
+    outline: 0 none;
+    outline-offset: 0;
+  }
+  .style-editor:focus-within {
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+    border-color: #4CAF50;
+  }
+</style>

package/front/src/components/components.js

@@ -0,0 +1,17 @@
+import { h } from 'vue'
+
+const components = {
+  card: {
+    description: 'PrimeVUE card',
+    previewContent: true,
+    attrs: [],
+    initialAttrs: {
+      class: 'surface-card py-1 px-3 shadow-2'
+    },
+    render: ({ content, attrs }, r) => h('div', { ...attrs.attrs }, r(content)),
+    editor: (attrs, { slots }) => h('div', { ...attrs }, slots.default()),
+    async: true
+  }
+}
+
+export default components

package/front/src/components/contentConfig.js

@@ -48,3 +48,13 @@ export const richEditorNodes = {
 
   ...messageNodes
 }
+
+import components from './components.js'
+
+export const pageNodes = {
+  ...richEditorNodes,
+
+  component: (params, r) => {
+    return components[params.attrs.is].render(params, r)
+  }
+}

package/front/src/components/contentConfigExtensions.js

@@ -19,6 +19,7 @@ import Strike from "@tiptap/extension-strike"
 
 import ImageNode from "./ImageNode.js"
 
+import ComponentNode from "./ComponentNode.js"
 
 export const marksExtensions = {
   bold: [Bold],
@@ -43,7 +44,9 @@ export const nodesExtensions = {
   orderedList: [OrderedList],
   listItem: [ListItem],
 
-  image: [ImageNode]
+  image: [ImageNode],
+
+  component: [ComponentNode]
 }
 
 export function getExtensions(contentConfig) {

package/front/src/router.js

@@ -18,10 +18,15 @@ export function wysiwygRoutes(config = {}) {
     }),
 
     route({
-      name: 'wysiwyg:documentEditor', path: prefix + 'collab', meta: { },
+      name: 'wysiwyg:documentEditor', path: prefix + 'doc/:target', meta: { },
       component: () => import("./DocumentEditorTest.vue"),
-      props: {
-      }
+      props: true
+    }),
+
+    route({
+      name: 'wysiwyg:documentPreview', path: prefix + 'view/:target', meta: { },
+      component: () => import("./DocumentPreviewTest.vue"),
+      props: true
     }),
 
     ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })

package/index.js

@@ -11,3 +11,7 @@ import EditorMenu from "./front/src/components/EditorMenu.vue"
 import ImageComponent from "./front/src/components/ImageComponent.vue"
 import ImageNode from "./front/src/components/ImageNode.js"
 export { DocumentEditor, Editor, EditorMenu, ImageComponent, ImageNode }
+
+import components from "./front/src/components/components.js"
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/wysiwyg-frontend",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,16 +21,16 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.2.0",
-    "@live-change/cli": "0.7.4",
+    "@live-change/cli": "0.7.5",
     "@live-change/dao": "0.5.8",
     "@live-change/dao-vue3": "0.5.8",
     "@live-change/dao-websocket": "0.5.8",
-    "@live-change/framework": "0.7.4",
-    "@live-change/password-authentication-service": "0.3.2",
-    "@live-change/prosemirror-service": "0.3.2",
-    "@live-change/secret-code-service": "0.3.2",
-    "@live-change/secret-link-service": "0.3.2",
-    "@live-change/session-service": "0.3.2",
+    "@live-change/framework": "0.7.5",
+    "@live-change/password-authentication-service": "0.3.4",
+    "@live-change/prosemirror-service": "0.3.4",
+    "@live-change/secret-code-service": "0.3.4",
+    "@live-change/secret-link-service": "0.3.4",
+    "@live-change/session-service": "0.3.4",
     "@live-change/vue3-components": "0.2.16",
     "@live-change/vue3-ssr": "0.2.16",
     "@tiptap/extension-blockquote": "^2.0.0-beta.29",
@@ -62,18 +62,19 @@
     "primeflex": "^3.2.1",
     "primeicons": "^6.0.1",
     "primevue": "^3.18.1",
+    "prismjs": "^1.28.0",
     "prosemirror-collab": "^1.3.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "rollup-plugin-visualizer": "5.6.0",
-    "serialize-javascript": "^6.0.0",
     "serve-static": "^1.15.0",
     "v-shared-element": "3.1.0",
     "vue-meta": "^3.0.0-alpha.9",
+    "vue-prism-editor": "2.0.0-alpha.2",
     "vue-router": "^4.1.3",
     "vue3-scroll-border": "0.1.2"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.7.4",
+    "@live-change/codeceptjs-helper": "0.7.5",
     "@wdio/selenium-standalone-service": "^7.20.8",
     "codeceptjs": "^3.3.4",
     "generate-password": "1.7.0",
@@ -85,5 +86,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "703c9723562ade7b2420e1b25b28ced51a96db09"
+  "gitHead": "7b0e7fc149a3d419aa125b45314cf4eac2fc9410"
 }

package/server/page.documentType.js

@@ -0,0 +1,103 @@
+module.exports = {
+  "marks": {
+    "bold": {},
+    "italic": {},
+    "underline": {},
+    "strike": {}
+  },
+  "nodes": {
+    "paragraph": {
+      "content": "inline*",
+      "group": "block"
+    },
+    "horizontalRule": {
+      "group": "block"
+    },
+    "heading": {
+      "content": "inline*",
+      "group": "block",
+      "defining": true,
+      "attrs": {
+        "level": {
+          "default": 1
+        }
+      }
+    },
+    "blockquote": {
+      "content": "block+",
+      "group": "block",
+      "defining": true
+    },
+    "codeBlock": {
+      "content": "text*",
+      "marks": "",
+      "group": "block",
+      "code": true,
+      "defining": true,
+      "attrs": {
+        "language": {
+          "default": null
+        }
+      }
+    },
+    "bulletList": {
+      "content": "listItem+",
+      "group": "block list"
+    },
+    "orderedList": {
+      "content": "listItem+",
+      "group": "block list",
+      "attrs": {
+        "start": {
+          "default": 1
+        }
+      }
+    },
+    "listItem": {
+      "content": "paragraph block*",
+      "defining": true
+    },
+    "image": {
+      "content": "",
+      "marks": "",
+      "group": "block",
+      "inline": false,
+      "atom": true,
+      "selectable": true,
+      "draggable": true,
+      "attrs": {
+        "image": {
+          "default": null
+        }
+      }
+    },
+    "doc": {
+      "content": "block+"
+    },
+    "text": {
+      "group": "inline"
+    },
+    "hardBreak": {
+      "group": "inline",
+      "inline": true,
+      "selectable": false
+    },
+    "component": {
+      "content": "block*",
+      "marks": "",
+      "group": "block",
+      "inline": false,
+      "selectable": true,
+      "draggable": true,
+      "attrs": {
+        "is": {
+          "default": "card"
+        },
+        "attrs": {
+          "default": {}
+        }
+      }
+    }
+  },
+  "topNode": "doc"
+}

package/server/services.config.js

@@ -17,7 +17,8 @@ module.exports = {
       name: 'prosemirror',
       path: '@live-change/prosemirror-service',
       documentTypes: {
-        rich: require('./rich.documentType.js')
+        rich: require('./rich.documentType.js'),
+        page: require('./page.documentType.js')
       },
       testLatency: 1000
     }