@live-change/wysiwyg-frontend 0.2.10 → 0.2.11

package/front/src/DocumentEditorTest.vue

@@ -35,7 +35,7 @@
 
   const emptyContent = {
     "type": "doc",
-    "content": [].concat(new Array(2).fill(
+    "content": [
       {
         "type": "paragraph",
         "content": [
@@ -53,8 +53,66 @@
             "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>

package/front/src/components/ComponentComponent.vue

@@ -1,22 +1,81 @@
 <template>
   <node-view-wrapper>
-    <ComponentEditor>
+    <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, attrs } = props.node.attrs
+  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
+  })
 
-  const ComponentEditor = components[is].editor
 </script>
 
-<style scoped>
+<style lang="scss">
+  .edit-buttons {
+    display: none;
+  }
+  .show-edit-buttons .edit-buttons {
+    display: flex;
+  }
 
 </style>

package/front/src/components/ComponentsMenu.vue

@@ -10,7 +10,7 @@
   <!--    <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)" >
+             @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;">
@@ -66,6 +66,7 @@
       "attrs": {
         "is": name,
         "attrs": {
+          ...component.initialAttrs,
           ...component.previewAttrs
         }
       },

package/front/src/components/DocumentEditor.vue

@@ -3,21 +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"
@@ -139,6 +160,14 @@
     ? 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() {
@@ -163,6 +192,20 @@
     }
   }
 
+  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/EditorMenu.vue

@@ -76,8 +76,8 @@
         </FileInput>
   <!--    </div>-->
 
-      <Button v-if="config.nodes.component" label="Insert Component"
-              class="p-button-sm p-button-primary inline-block mr-1 mb-1"
+      <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"
@@ -100,7 +100,7 @@
     </div>
     <slot name="after" />
     <OverlayPanel ref="insertComponentOverlay" style="width: 450px" :breakpoints="{'960px': '75vw'}">
-      <ComponentsMenu :config="config" @selected="c => handleComponentSelected(c)" />
+      <ComponentsMenu :config="config" @selected="(n,c) => handleComponentSelected(n,c)" />
     </OverlayPanel>
 <!--    <div class="surface-card p-1 shadow-2" style="width: 450px">
       <h3>components:</h3>
@@ -159,12 +159,13 @@
   function openComponentMenu(event) {
     insertComponentOverlay.value.show(event)
   }
-  function handleComponentSelected(component) {
+  function handleComponentSelected(name, component) {
     insertComponentOverlay.value.hide()
     editor.value.chain().focus().insertContent({
       type: 'component',
       attrs: {
-        is: component,
+        is: name,
+        attrs: component.initialAttrs
       },
       content: [
         { type: 'paragraph', content: [

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/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

@@ -5,11 +5,13 @@ const components = {
     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()),
+    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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/wysiwyg-frontend",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -26,11 +26,11 @@
     "@live-change/dao-vue3": "0.5.8",
     "@live-change/dao-websocket": "0.5.8",
     "@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/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,13 +62,14 @@
     "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"
   },
@@ -85,5 +86,5 @@
   "author": "",
   "license": "ISC",
   "description": "",
-  "gitHead": "7d4c56cc610d692df963c3916411ceb46663b344"
+  "gitHead": "7b0e7fc149a3d419aa125b45314cf4eac2fc9410"
 }