@live-change/wysiwyg-frontend 0.2.9 → 0.2.10

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,12 +28,11 @@
     },
     nodes: {
       //...messageNodes,
-      ...richEditorNodes
+      //...richEditorNodes
+      ...pageNodes
     }
   }
 
-  const document = 'testDocument'
-
   const emptyContent = {
     "type": "doc",
     "content": [].concat(new Array(2).fill(
@@ -60,6 +59,12 @@
 
 </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,22 @@
+<template>
+  <node-view-wrapper>
+    <ComponentEditor>
+      <node-view-content class="content" />
+    </ComponentEditor>
+  </node-view-wrapper>
+</template>
+
+<script setup>
+  import { NodeViewContent, nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
+  import components from "./components.js";
+
+  const props = defineProps(nodeViewProps)
+
+  const { is, attrs } = props.node.attrs
+
+  const ComponentEditor = components[is].editor
+</script>
+
+<style scoped>
+
+</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,107 @@
+<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)" >
+          <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.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

@@ -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, getCurrentInstance, onUnmounted, inject, onMounted
   } from 'vue'
@@ -119,6 +120,10 @@
       ProseMirrorCollab.configure({
         version: documentData.version,
         clientID
+      }),
+      History.configure({
+        depth: 100,
+        newGroupDelay: 500
       })
     ],
     onTransaction: ({ editor, transaction }) => {
@@ -134,6 +139,8 @@
     ? serializeSchema(editor.view.state.schema.spec)
     : getSchemaSpecFromConfig(props.config)
 
+  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 +162,7 @@
       transaction.apply(editor.value.view.state)
     }
   }
+
 </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="Insert Component"
+              class="p-button-sm p-button-primary 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="c => handleComponentSelected(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,27 @@
     await upload.upload()
   }
 
-  window.editor = editor.value
+  const insertComponentOverlay = ref()
+  function openComponentMenu(event) {
+    insertComponentOverlay.value.show(event)
+  }
+  function handleComponentSelected(component) {
+    insertComponentOverlay.value.hide()
+    editor.value.chain().focus().insertContent({
+      type: 'component',
+      attrs: {
+        is: component,
+      },
+      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/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/components.js

@@ -0,0 +1,15 @@
+import { h } from 'vue'
+
+const components = {
+  card: {
+    description: 'PrimeVUE card',
+    previewContent: true,
+    attrs: [],
+    render: ({ content, attrs }, r) => h('div', { 'class': 'surface-card py-1 px-3 shadow-2 w-full' }, r(content)),
+    editor: (props, { slots }) => h('div', { 'class': 'surface-card py-1 px-3 shadow-2 w-full' }, 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.10",
   "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.3",
+    "@live-change/prosemirror-service": "0.3.3",
+    "@live-change/secret-code-service": "0.3.3",
+    "@live-change/secret-link-service": "0.3.3",
+    "@live-change/session-service": "0.3.3",
     "@live-change/vue3-components": "0.2.16",
     "@live-change/vue3-ssr": "0.2.16",
     "@tiptap/extension-blockquote": "^2.0.0-beta.29",
@@ -73,7 +73,7 @@
     "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 +85,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "703c9723562ade7b2420e1b25b28ced51a96db09"
+  "gitHead": "7d4c56cc610d692df963c3916411ceb46663b344"
 }

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
     }