@live-change/wysiwyg-frontend 0.2.20 → 0.2.21

package/front/src/App.vue

@@ -35,4 +35,10 @@
   api.validators.email = emailValidator
   api.validators.password = passwordValidator
 
+  import { defaultHighlightStyle } from "@codemirror/language"
+  import { StyleModule } from "style-mod"
+  if(typeof window != 'undefined') {
+    StyleModule.mount(window.document, defaultHighlightStyle.module)
+  }
+
 </script>

package/front/src/components/CodeBlockNode.js

@@ -0,0 +1,80 @@
+import { Node } from '@tiptap/core'
+import CodeBlockView from "./CodeBlockView.js"
+
+function arrowHandler(dir) {
+  return (state, dispatch, view) => {
+    if (state.selection.empty && view.endOfTextblock(dir)) {
+      let side = dir == "left" || dir == "up" ? -1 : 1
+      let $head = state.selection.$head
+      let nextPos = Selection.near(
+        state.doc.resolve(side > 0 ? $head.after() : $head.before()), side)
+      if (nextPos.$head && nextPos.$head.parent.type.name == "code_block") {
+        dispatch(state.tr.setSelection(nextPos))
+        return true
+      }
+    }
+    return false
+  }
+}
+
+export default Node.create({
+  name: 'codeBlock',
+  group: 'block',
+  atom: false,
+  inline: false,
+  selectable: true,
+  draggable: true,
+  content: 'text*',
+  marks: '',
+
+  addAttributes() {
+    return {
+      language: {
+        rendered: false,
+        default: 'text'
+      },
+    }
+  },
+
+  /*parseHTML() {
+    return [
+      {
+        tag: this.options.allowBase64
+            ? 'img[src]'
+            : 'img[src]:not([src^="data:"])',
+      },
+    ]
+  },*/
+
+  renderHTML({ }) {
+    return ['img', {}]
+  },
+
+  addNodeView() {
+    return (args) => {
+      const { editor, node, getPos } = args
+      return new CodeBlockView(node, editor, getPos)
+    }
+  },
+
+  addCommands() {
+    return {
+      setCodeBlock: attributes => ({ commands }) => {
+        console.log("SET CODE BLOCK", attributes)
+        return commands.setNode(this.name, attributes)
+      },
+      toggleCodeBlock: attributes => ({ commands }) => {
+        return commands.toggleNode(this.name, 'paragraph', attributes)
+      },
+    }
+  },
+
+  addKeyboardShortcuts() {
+    return {
+      ArrowLeft: arrowHandler("left"),
+      ArrowRight: arrowHandler("right"),
+      ArrowUp: arrowHandler("up"),
+      ArrowDown: arrowHandler("down")
+    }
+  }
+})

package/front/src/components/CodeBlockView.js

@@ -0,0 +1,139 @@
+import { TextSelection } from 'prosemirror-state'
+import {
+  EditorView, keymap as cmKeymap, drawSelection
+} from "@codemirror/view"
+import {javascript} from "@codemirror/lang-javascript"
+import {defaultKeymap} from "@codemirror/commands"
+import {syntaxHighlighting, defaultHighlightStyle} from "@codemirror/language"
+
+import {exitCode} from "prosemirror-commands"
+import {undo, redo} from "prosemirror-history"
+
+class CodeBlockView {
+  constructor(node, editor, getPos) {
+    // Store for later
+    this.node = node
+    this.view = editor.view
+    this.schema = editor.schema
+    this.getPos = getPos
+
+    this.language = node.attrs.language
+
+    // Select language plugin
+    let languagePlugins = []
+    switch(this.language) {
+      case 'javascript':
+        languagePlugins.push(javascript())
+        break
+      default:
+        break
+    }
+
+    // Create a CodeMirror instance
+    this.cm = new EditorView({
+      doc: this.node.textContent,
+      extensions: [
+        cmKeymap.of([
+          ...this.codeMirrorKeymap(),
+          ...defaultKeymap
+        ]),
+        drawSelection(),
+        syntaxHighlighting(defaultHighlightStyle),
+        ...languagePlugins,
+        EditorView.updateListener.of(update => this.forwardUpdate(update))
+      ]
+    })
+    // The editor's outer node is our DOM representation
+    this.dom = this.cm.dom
+
+    // This flag is used to avoid an update loop between the outer and
+    // inner editor
+    this.updating = false
+  }
+
+  forwardUpdate(update) {
+    if (this.updating || !this.cm.hasFocus) return
+    let offset = this.getPos() + 1, {main} = update.state.selection
+    let selection = TextSelection.create(this.view.state.doc,
+      offset + main.from, offset + main.to)
+    if (update.docChanged || !this.view.state.selection.eq(selection)) {
+      let tr = this.view.state.tr.setSelection(selection)
+      update.changes.iterChanges((fromA, toA, fromB, toB, text) => {
+        if (text.length)
+          tr.replaceWith(offset + fromA, offset + toA,
+            this.schema.text(text.toString()))
+        else
+          tr.delete(offset + fromA, offset + toA)
+        offset += (toB - fromB) - (toA - fromA)
+      })
+      this.view.dispatch(tr)
+    }
+  }
+
+  codeMirrorKeymap() {
+    let view = this.view
+    return [
+      {key: "ArrowUp", run: () => this.maybeEscape("line", -1)},
+      {key: "ArrowLeft", run: () => this.maybeEscape("char", -1)},
+      {key: "ArrowDown", run: () => this.maybeEscape("line", 1)},
+      {key: "ArrowRight", run: () => this.maybeEscape("char", 1)},
+      {key: "Ctrl-Enter", run: () => {
+          if (!exitCode(view.state, view.dispatch)) return false
+          view.focus()
+          return true
+        }},
+      {key: "Ctrl-z", mac: "Cmd-z",
+        run: () => undo(view.state, view.dispatch)},
+      {key: "Shift-Ctrl-z", mac: "Shift-Cmd-z",
+        run: () => redo(view.state, view.dispatch)},
+      {key: "Ctrl-y", mac: "Cmd-y",
+        run: () => redo(view.state, view.dispatch)}
+    ]
+  }
+
+  maybeEscape(unit, dir) {
+    let {state} = this.cm, {main} = state.selection
+    if (!main.empty) return false
+    if (unit == "line") main = state.doc.lineAt(main.head)
+    if (dir < 0 ? main.from > 0 : main.to < state.doc.length) return false
+    let targetPos = this.getPos() + (dir < 0 ? 0 : this.node.nodeSize)
+    let selection = Selection.near(this.view.state.doc.resolve(targetPos), dir)
+    let tr = this.view.state.tr.setSelection(selection).scrollIntoView()
+    this.view.dispatch(tr)
+    this.view.focus()
+  }
+
+  update(node) {
+    if (node.type != this.node.type) return false
+    if (node.attrs.language != this.language) return false
+    if (this.updating) return true
+    let newText = node.textContent, curText = this.cm.state.doc.toString()
+    if (newText != curText) {
+      let start = 0, curEnd = curText.length, newEnd = newText.length
+      while (start < curEnd &&
+      curText.charCodeAt(start) == newText.charCodeAt(start)) {
+        ++start
+      }
+      while (curEnd > start && newEnd > start &&
+      curText.charCodeAt(curEnd - 1) == newText.charCodeAt(newEnd - 1)) {
+        curEnd--
+        newEnd--
+      }
+      this.updating = true
+      this.cm.dispatch({
+        changes: {
+          from: start, to: curEnd,
+          insert: newText.slice(start, newEnd)
+        }
+      })
+      this.updating = false
+    }
+    return true
+  }
+
+  selectNode() { this.cm.focus() }
+  stopEvent() { return true }
+}
+
+
+export default CodeBlockView

package/front/src/components/ComponentComponent.vue

@@ -1,7 +1,10 @@
 <template>
   <node-view-wrapper>
-    <ComponentEditor v-bind="{ ...attrs, class: ['relative', attrs.class] }">
-      <node-view-content class="content" />
+    <ComponentEditor v-bind="{
+      ...attrs, class: ['relative', editorClass]
+    }">
+      <node-view-content :class="[editorContentClass]"
+                         :style="style" />
       <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="[
@@ -43,7 +46,9 @@
   const is = computed(() => props.node.attrs.is)
   const attrs = computed(() => props.node.attrs.attrs)
 
-  const ComponentEditor = components[props.node.attrs.is].editor
+  const component = computed(() => components[props.node.attrs.is])
+
+  const ComponentEditor = computed(() => component.value.editor)
 
   const uid = getCurrentInstance().uid
 
@@ -68,6 +73,23 @@
       : null
   })
 
+  const editorClass = computed(() => [
+    component.value.editorClass
+      ? component.value.editorClass(attrs.value)
+      : attrs.value.class,
+    { 'selected-component-editor': selectedEditor.value },
+    { 'selected-component-editor-style': selectedEditor.value == 'style' },
+    { 'selected-component-editor-settings': selectedEditor.value == 'settings' }
+  ])
+  const editorContentClass = computed(() => [
+    component.value.editorContentClass
+      ? component.value.editorContentClass(attrs.value)
+      : 'content',
+    { 'selected-component-editor-content': selectedEditor.value },
+    { 'selected-component-editor-content-style': selectedEditor.value == 'style' },
+    { 'selected-component-editor-content-settings': selectedEditor.value == 'settings' }
+  ])
+
 </script>
 
 <style lang="scss">
@@ -77,5 +99,18 @@
   .show-edit-buttons .edit-buttons {
     display: flex;
   }
+  .selected-component-editor-content-settings {
+    & > [data-slot] {
+      &::before {
+        content: 'slot: ' attr(data-slot) ;
+        color: orangered;
+        border: orangered 1px solid;
+        font-size: 0.8em;
+        padding: 2px;
+        margin: 0;
+      };
+      border: 1px dashed orangered;
+    }
+  }
 
 </style>

package/front/src/components/ComponentNode.js

@@ -9,7 +9,7 @@ export default Node.create({
   inline: false,
   selectable: true,
   draggable: true,
-  content: 'block*',
+  content: '(block | slot)*',
   marks: '',
 
   addAttributes() {
@@ -54,7 +54,7 @@ export default Node.create({
     }
     htmlAttrs['data-is'] = this.options.is
     return ['component', mergeAttributes(HTMLAttributes, htmlAttrs)]*/
-    return ['component', HTMLAttributes]
+    return ['component', HTMLAttributes, 0]
   },
 
   addNodeView() {
@@ -63,12 +63,7 @@ export default Node.create({
 
   addCommands() {
     return {
-      setImage: options => ({ commands }) => {
-        return commands.insertContent({
-          type: this.name,
-          attrs: options
-        })
-      }
+
     }
   }
 })

package/front/src/components/ContentView.js

@@ -18,6 +18,7 @@ function ContentView(props, context) {
   return h('div', {}, [
     h('h1', {}, 'Empty document'),
   ])
+
 }
 
 export default ContentView

package/front/src/components/DocumentEditor.vue

@@ -36,6 +36,7 @@
 
   import { useEditor, EditorContent } from '@tiptap/vue-3'
   import { History } from '@tiptap/extension-history'
+  import Gapcursor from '@tiptap/extension-gapcursor'
   import {
     ref, computed, watch, provide, defineEmits, defineProps, getCurrentInstance, onUnmounted, inject, onMounted,
     shallowRef
@@ -122,7 +123,7 @@
     const currentVersion = getVersion(state)
     console.log("COLLAB VERSION", currentVersion)
     let { steps, clientIDs } = authority.stepsSince(currentVersion, state.schema)
-    console.error("RECEIVE STEPS", steps, clientIDs, clientID)
+    console.log("RECEIVE STEPS", steps, clientIDs, clientID)
     const transaction = receiveTransaction(state, steps, clientIDs)
     view.dispatch(transaction)
     version.value = authority.remoteVersion
@@ -131,7 +132,7 @@
     const state = editor.value.reactiveState.value
     const sendable = sendableSteps(state)
     if (sendable) {
-      console.error("SEND STEPS", sendable.steps, sendable.version)
+      console.log("SEND STEPS", sendable.steps, sendable.version)
       authority.receiveSteps(sendable.version, sendable.steps, sendable.clientID)
     }
   })
@@ -146,6 +147,7 @@
     content: documentData.content,
     extensions: [
       ...extensions,
+      Gapcursor,
       ProseMirrorCollab.configure({
         version: documentData.version,
         clientID
@@ -182,7 +184,7 @@
     const state = editor.value.reactiveState.value
     const sendable = sendableSteps(state)
     if (sendable) {
-      console.error("SEND STEPS", sendable.steps, sendable.version)
+      console.log("SEND STEPS", sendable.steps, sendable.version)
       authority.receiveSteps(sendable.version, sendable.steps, sendable.clientID)
     }
   }
@@ -216,6 +218,8 @@
 
 </script>
 
-<style scoped>
-
+<style>
+  .cm-line, .cm-content {
+    padding: 0 !important;
+  }
 </style>

package/front/src/components/EditorMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="sticky" style="top: 90px; z-index: 1">
+  <div class="sticky" style="top: 90px; z-index: 10">
     <slot name="before" />
     <div class="surface-card p-1 shadow-2 border-round flex flex-row flex-wrap">
 
@@ -55,8 +55,13 @@
                 :class="{ 'p-button-outlined': !editor.isActive('blockquote')  }"
                 @click="editor.chain().focus().toggleBlockquote().run()" />
         <Button v-if="config.nodes.codeBlock" icon="fa-solid fa-code" class="p-button-sm"
-                :class="{ 'p-button-outlined': !editor.isActive('codeblock')  }"
+                :class="{ 'p-button-outlined': !editor.isActive('codeBlock')  }"
                 @click="editor.chain().focus().toggleCodeBlock().run()" />
+        <Dropdown v-if="editor.isActive('codeBlock')" class="editor-menu-dropdown"
+                  :options="languages"
+                  :modelValue="editor.getAttributes('codeBlock').language"
+                  :optionLabel="option => option[0].toUpperCase()+option.slice(1)"
+                  @update:modelValue="selected => editor.chain().focus().setCodeBlock({ language: selected }).run()" />
       </div>
 
       <div class="p-buttonset mr-1 mb-1">
@@ -76,9 +81,9 @@
         </FileInput>
   <!--    </div>-->
 
-      <Button v-if="config.nodes.component" label="Component"
+      <Button v-if="config.nodes.component" label="Insert"
               class="p-button-sm p-button-primary p-button-outlined inline-block mr-1 mb-1"
-              @click="openComponentMenu" />
+              @click="openTemplateMenu" />
 
       <span v-if="saveState"
             class="p-button p-component p-button-sm p-button-outlined p-button-secondary cursor-auto
@@ -99,12 +104,13 @@
 
     </div>
     <slot name="after" />
-    <OverlayPanel ref="insertComponentOverlay" style="width: 450px" :breakpoints="{'960px': '75vw'}">
-      <ComponentsMenu :config="config" @selected="(n,c) => handleComponentSelected(n,c)" />
+    <OverlayPanel ref="insertTemplateOverlay" style="width: 450px" :breakpoints="{'960px': '75vw'}">
+      <TemplatesMenu :config="config" @selected="t => handleTemplateSelected(t)" />
     </OverlayPanel>
+
 <!--    <div class="surface-card p-1 shadow-2" style="width: 450px">
       <h3>components:</h3>
-      <ComponentsMenu :config="config" />
+      <TemplatesMenu :config="config" />
     </div>-->
   </div>
 </template>
@@ -113,9 +119,10 @@
   import Button from "primevue/button"
   import ProgressSpinner from "primevue/progressspinner"
   import OverlayPanel from 'primevue/overlaypanel'
+  import Dropdown from "primevue/dropdown"
 
-  import ComponentsMenu from "./ComponentsMenu.vue"
-  import { inject, getCurrentInstance, ref } from "vue"
+  import TemplatesMenu from "./TemplatesMenu.vue"
+  import { inject, getCurrentInstance, ref, computed } from "vue"
   import { toRefs } from "@vueuse/core"
   import { uploadImage } from "@live-change/image-frontend"
   import { FileInput } from "@live-change/upload-frontend"
@@ -135,15 +142,13 @@
     saveState: {
       type: String,
       default: null
-    },
-    availableComponents: {
-      type: Array,
-      default: () => []
     }
   })
 
   const { editor, config, saveState } = toRefs(props)
 
+  const languages = computed(() => config.languages ?? ['plaintext', 'javascript'])
+
   async function handleImageUpload(file) {
     const upload = uploadImage('test', { file },
         { preparedPreview: true, appContext, generateId: true })
@@ -155,32 +160,28 @@
     await upload.upload()
   }
 
-  const insertComponentOverlay = ref()
-  function openComponentMenu(event) {
-    insertComponentOverlay.value.show(event)
+  const insertTemplateOverlay = ref()
+  function openTemplateMenu(event) {
+    insertTemplateOverlay.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()
+  function handleTemplateSelected(template) {
+    insertTemplateOverlay.value.hide()
+    editor.value.chain().focus().insertContent(template.content()).run()
     //editor.value.chain().focus().setNode('component', { is: component }).run()
   }
 
   if(typeof window != 'undefined') window.editor = editor.value
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .p-buttonset .p-button:not(:last-child) { /* buttonset bug fix */
     border-right: 0 none !important;
   }
 </style>
+<style lang="scss">
+  .editor-menu-dropdown {
+    .p-dropdown-label {
+      padding: 0.345em 0.5em !important;
+    }
+  }
+</style>

package/front/src/components/ImageComponent.vue

@@ -1,6 +1,6 @@
 <template>
   <node-view-wrapper>
-    <Image :image="image" width="100" dom-resize="width" />
+    <Image :image="image" width="100" dom-resize="width" class="w-full" />
   </node-view-wrapper>
 </template>
 

package/front/src/components/SlotNode.js

@@ -0,0 +1,54 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import ComponentComponent from "./ComponentComponent.vue"
+
+export default Node.create({
+  name: 'slot',
+  group: 'slot',
+  //atom: true,
+  inline: false,
+  selectable: false,
+  draggable: false,
+  content: 'block*',
+  marks: '',
+
+  addAttributes() {
+    return {
+      name: {
+        default: 'default',
+        renderHTML: attributes => {
+          return {
+            'data-name': attributes.name
+          }
+        },
+      },
+      tag: {
+        default: 'div',
+        renderHTML: attributes => {
+          return {
+            'data-tag': attributes.tag
+          }
+        }
+      },
+      attrs: {
+        default: {},
+        renderHTML: attributes => {
+          const htmlAttrs = {}
+          const attrs = attributes.attrs
+          for(let key in this.options) {
+            htmlAttrs[`data-attr-${key}`] = attrs[key]
+          }
+          return htmlAttrs
+        },
+      }
+    }
+  },
+
+  renderHTML({ HTMLAttributes, node }) {
+    const slotAttributes = {
+      ...node.attrs.attrs,
+      'data-slot': node.attrs.name
+    }
+    return [node.attrs.tag, mergeAttributes(HTMLAttributes, slotAttributes), 0]
+  }
+})

package/front/src/components/TemplatesMenu.vue

@@ -0,0 +1,68 @@
+<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="(template, index) in searchResults" :key="template.name"
+             class="flex flex-wrap relative cursor-pointer hover:surface-100"
+             @click="() => emit('selected', template)" >
+          <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="{ type: 'doc', content: template.content({ preview: true }) }"
+                           style="aspect-ratio: 1/1" />
+            </div>
+          </div>
+          <div class="ml-2">
+            <h3>{{ template.name[0].toUpperCase() + template.name.slice(1) }}</h3>
+            <p>{{ template.description }}</p>
+          </div>
+        </div>
+  <!--    </div>-->
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import InputText from "primevue/inputtext"
+
+  import ContentView from "./ContentView.js"
+  import templates from "./templates.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()
+    const byName = templates.filter(({ name }) => {
+      return name.toLowerCase().includes(query)
+    })
+    const byDescription = templates.filter(({ description }) => {
+      return (description || '').toLowerCase().includes(query)
+    }).filter(({ name }) => !byName.find(found => name == found.name))
+    return [...byName, ...byDescription]
+  })
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/components/components.js

@@ -2,14 +2,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
+  },
+  div: {
+    attrs: [],
     render: ({ content, attrs }, r) => h('div', { ...attrs.attrs }, r(content)),
     editor: (attrs, { slots }) => h('div', { ...attrs }, slots.default()),
+    editorClass: (attrs) => [],
+    editorContentClass: (attrs) => [attrs.class],
     async: true
   }
 }

package/front/src/components/contentConfig.js

@@ -1,5 +1,8 @@
 import { h } from 'vue'
 import { Image } from "@live-change/image-frontend"
+import { parser as javascriptParser } from "@lezer/javascript"
+import { highlightTree } from "@lezer/highlight"
+import { defaultHighlightStyle } from "@codemirror/language"
 
 export const basicMarks = {
   bold: (m, c) => h('strong', {}, [ c ]),
@@ -38,13 +41,26 @@ export const richEditorNodes = {
 
   heading: ({ content, attrs }, r) => h('h'+(+attrs.level), { }, r(content)),
   blockquote: ({ content }, r) => h('blockquote', { }, r(content)),
-  codeBlock:  ({ content }, r) => h('pre', { }, h('code', { }, r(content))),
+  codeBlock:  ({ content }, r) => {
+    const code = content.map(t => t.text).join('')
+    const tree = javascriptParser.parse(code)
+    let pos = 0
+    let output = []
+    highlightTree(tree, defaultHighlightStyle, (from, to, classes) => {
+      if(from > pos) output.push(h('span', { }, code.slice(pos, from)))
+      //console.log("HIGHLIGHT", from, to, classes, code.slice(from, to))
+      output.push(h('span', { class: classes }, code.slice(from, to)))
+      pos = to
+    })
+    if(code.length > pos) output.push(h('span', { }, code.slice(pos)))
+    return h('pre', { }, h('code', { }, output))
+  },
 
   bulletList: ({ content }, r) => h('ul', { }, r(content)),
   orderedList: ({ content }, r) => h('ol', { }, r(content)),
   listItem: ({ content }, r) => h('li', { }, r(content)),
 
-  image: ({ attrs }) => h(Image, { domResize: 'width', width: 100, ...attrs }),
+  image: ({ attrs }) => h(Image, { domResize: 'width', width: 100, class: 'w-full', ...attrs }),
 
   ...messageNodes
 }
@@ -56,5 +72,9 @@ export const pageNodes = {
 
   component: (params, r) => {
     return components[params.attrs.is].render(params, r)
+  },
+  slot: ({ content, attrs }, r) => {
+    /// component slots are not rendered, they are just placeholders, other slots rendered as divs
+    return h(attrs.tag ?? 'div', { ...attrs.attrs }, r(content))
   }
 }

package/front/src/components/contentConfigExtensions.js

@@ -5,7 +5,7 @@ import HardBreak from "@tiptap/extension-hard-break"
 import HorizontalRule from "@tiptap/extension-horizontal-rule"
 import Heading from '@tiptap/extension-heading'
 import Blockqoute from "@tiptap/extension-blockquote"
-import CodeBlock from "@tiptap/extension-code-block"
+//import CodeBlock from "@tiptap/extension-code-block"
 import BulletList from "@tiptap/extension-bullet-list"
 import OrderedList from "@tiptap/extension-ordered-list"
 import ListItem from "@tiptap/extension-list-item"
@@ -19,7 +19,10 @@ import Strike from "@tiptap/extension-strike"
 
 import ImageNode from "./ImageNode.js"
 
+import CodeBlockNode  from "./CodeBlockNode.js";
+
 import ComponentNode from "./ComponentNode.js"
+import SlotNode from "./SlotNode.js"
 
 export const marksExtensions = {
   bold: [Bold],
@@ -38,7 +41,8 @@ export const nodesExtensions = {
 
   heading: [Heading],
   blockquote: [Blockqoute],
-  codeBlock:  [CodeBlock],
+  //codeBlock:  [CodeBlock]
+  codeBlock: [CodeBlockNode],
 
   bulletList: [BulletList],
   orderedList: [OrderedList],
@@ -46,7 +50,9 @@ export const nodesExtensions = {
 
   image: [ImageNode],
 
-  component: [ComponentNode]
+  component: [ComponentNode],
+
+  slot: [SlotNode],
 }
 
 export function getExtensions(contentConfig) {

package/front/src/components/templates.js

@@ -0,0 +1,70 @@
+
+export function previewContent(component, title) {
+  return [
+    {type: 'heading', attrs:{ level: 3 }, content: [{type: 'text', text: title || component.name }]},
+    {type: 'paragraph', content: [{type: 'text', text: component.description }]}
+  ]
+}
+export function initialContent(component, text) {
+  return [
+    {type: 'paragraph', content: [{type: 'text', text: text || (component.name + ' content') }]},
+  ]
+}
+
+const templates = [
+  {
+    name: 'Card',
+    description: 'PrimeVUE card',
+    content({ preview } = {}) {
+      return [{
+        type: 'component',
+        attrs: {
+          is: 'div',
+          attrs: {
+            class: 'surface-card py-1 px-3 shadow-2'
+          }
+        },
+        content: preview ? previewContent(this) : initialContent(this)
+      }]
+    }
+  },
+  {
+    name: 'Split',
+    description: 'Two columns',
+    content({ preview } = {}) {
+      return [{
+        type: 'component',
+        attrs: {
+          is: 'div',
+          attrs: {
+            class: 'flex flex-row flex-wrap'
+          }
+        },
+        content: [
+          {
+            type: 'slot',
+            attrs: {
+              name: 'left',
+              attrs: {
+                class: preview ? 'w-6' : 'w-12 md:w-6'
+              }
+            },
+            content: preview ? previewContent(this, 'Left') : initialContent(this, 'left')
+          },
+          {
+            type: 'slot',
+            attrs: {
+              name: 'right',
+              attrs: {
+                class: preview ? 'w-6' : 'w-12 md:w-6'
+              }
+            },
+            content: preview ? previewContent(this, 'Right') : initialContent(this, 'right')
+          }
+        ]
+      }]
+    }
+  }
+]
+
+export default templates

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/wysiwyg-frontend",
-  "version": "0.2.20",
+  "version": "0.2.21",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -20,6 +20,10 @@
     "debug": "node --inspect-brk server"
   },
   "dependencies": {
+    "@codemirror/commands": "^6.1.2",
+    "@codemirror/lang-javascript": "^6.1.2",
+    "@codemirror/language": "^6.1.2",
+    "@codemirror/view": "^6.7.1",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "@live-change/cli": "0.7.6",
     "@live-change/dao": "0.5.8",
@@ -66,6 +70,7 @@
     "prismjs": "^1.28.0",
     "prosemirror-collab": "^1.3.0",
     "prosemirror-commands": "^1.3.1",
+    "prosemirror-gapcursor": "^1.3.1",
     "prosemirror-history": "^1.3.0",
     "prosemirror-keymap": "^1.2.0",
     "prosemirror-model": "^1.18.1",
@@ -95,5 +100,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "b1a34a42020c245b4e764d0df175cdde846d0e6e"
+  "gitHead": "c26408cfdc9dfb20a45127dbee1751258edaf4da"
 }

package/server/page.documentType.js

@@ -32,11 +32,13 @@ module.exports = {
       "content": "text*",
       "marks": "",
       "group": "block",
-      "code": true,
-      "defining": true,
+      "inline": false,
+      "atom": false,
+      "selectable": true,
+      "draggable": true,
       "attrs": {
         "language": {
-          "default": null
+          "default": "text"
         }
       }
     },
@@ -83,7 +85,7 @@ module.exports = {
       "selectable": false
     },
     "component": {
-      "content": "block*",
+      "content": "(block | slot)*",
       "marks": "",
       "group": "block",
       "inline": false,
@@ -97,6 +99,25 @@ module.exports = {
           "default": {}
         }
       }
+    },
+    "slot": {
+      "content": "block*",
+      "marks": "",
+      "group": "slot",
+      "inline": false,
+      "selectable": false,
+      "draggable": false,
+      "attrs": {
+        "name": {
+          "default": "default"
+        },
+        "tag": {
+          "default": "div"
+        },
+        "attrs": {
+          "default": {}
+        }
+      }
     }
   },
   "topNode": "doc"

package/front/src/components/ComponentsMenu.vue

@@ -1,108 +0,0 @@
-<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>