@live-change/wysiwyg-frontend 0.0.3

package/front/src/EditorWithPreview.vue

@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="grid w-full">
+      <div class="col relative">
+        <Editor v-model="content" :config="contentConfig" />
+      </div>
+      <div class="col relative">
+        <ContentView :content="content" :config="contentConfig" />
+      </div>
+    </div>
+
+    <pre>{{ JSON.stringify(JSON.parse(content), null, '  ') }}</pre>
+  </div>
+
+</template>
+
+<script setup>
+  import ContentView from "./ContentView.js"
+  import Editor from "./Editor.vue"
+  import { ref } from 'vue'
+  import { basicMarks, messageNodes, richEditorNodes } from "./contentConfig.js"
+
+  const contentConfig = {
+    marks: {
+      ...basicMarks
+    },
+    nodes: {
+      //...messageNodes,
+      ...richEditorNodes
+    }
+  }
+
+  const content = ref(JSON.stringify({
+    "type": "doc",
+    "content": [    {
+      "type": "image",
+      "attrs": {
+        "image": "[Wc6GBWx5c.0@1V6ZJBwyF_1I98X_]"
+      }
+    }].concat(new Array(2).fill(
+      {
+        "type": "paragraph",
+        "content": [
+          {
+            "type": "text",
+            "text": "test"
+          },
+          {
+            "type": "text",
+            "marks": [
+              {
+                "type": "bold"
+              }
+            ],
+            "text": "est"
+          }
+        ]
+      }
+    ))
+  }))
+</script>
+
+<style scoped>
+
+</style>

package/front/src/ImageComponent.vue

@@ -0,0 +1,35 @@
+<template>
+  <node-view-wrapper>
+    <Image :image="image" width="100" dom-resize="width" />
+  </node-view-wrapper>
+</template>
+
+<script setup>
+
+  import { inject, computed, onUnmounted } from 'vue'
+  import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+  import { imageUploads, Image } from "@live-change/image-frontend";
+
+  const upload = computed(() => {
+    return imageUploads.value.find(upload => upload.id == props.image)
+  })
+
+  const props = defineProps(nodeViewProps)
+  const image = computed(() => props.node.attrs.image )
+
+  const form = inject('form', null)
+  if(form) {
+    const barrier = async () => {
+      if(upload.value) await upload.value.upload()
+    }
+    form.addBarrier('', barrier)
+    onUnmounted(() => {
+      form.removeBarrier('', barrier)
+    })
+  }
+
+</script>
+
+<style scoped>
+
+</style>

package/front/src/ImageNode.js

@@ -0,0 +1,52 @@
+import { Node } from '@tiptap/core'
+import { VueNodeViewRenderer } from '@tiptap/vue-3'
+import ImageComponent from "./ImageComponent.vue"
+
+
+export default Node.create({
+  name: 'image',
+  group: 'block',
+  atom: true,
+  inline: false,
+  selectable: true,
+  draggable: true,
+  content: '',
+  marks: '',
+
+  addAttributes() {
+    return {
+      image: {
+        rendered: false
+      },
+    }
+  },
+
+  /*parseHTML() {
+    return [
+      {
+        tag: this.options.allowBase64
+            ? 'img[src]'
+            : 'img[src]:not([src^="data:"])',
+      },
+    ]
+  },*/
+
+  renderHTML({ }) {
+    return ['img', {}]
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(ImageComponent)
+  },
+
+  addCommands() {
+    return {
+      setImage: options => ({ commands }) => {
+        return commands.insertContent({
+          type: this.name,
+          attrs: options
+        })
+      }
+    }
+  }
+})

package/front/src/NavBar.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
+              relative md:sticky top-0 z-5"
+       style="min-height: 80px" key="navbar">
+    <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
+    <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple"
+       v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
+      <i class="pi pi-bars text-4xl"></i>
+    </a>
+    <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
+      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-home mr-2"></i>
+            <span>Home</span>
+          </a>
+        </li>
+        <li class="lg:relative">
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
+             v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+            <i class="pi pi-users mr-2"></i>
+            <span>Customers</span>
+            <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
+          </a>
+          <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
+            <li>
+              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                <i class="pi pi-user-plus mr-2"></i>
+                <span class="font-medium">Add New</span>
+              </a>
+            </li>
+            <li class="relative">
+              <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
+                 v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
+                <i class="pi pi-search mr-2"></i>
+                <span class="font-medium">Search</span>
+                <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
+              </a>
+              <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
+                <li>
+                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-shopping-cart mr-2"></i>
+                    <span class="font-medium">Purchases</span>
+                  </a>
+                </li>
+                <li class="relative">
+                  <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
+                    <i class="pi pi-comments mr-2"></i>
+                    <span class="font-medium">Messages</span>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-calendar mr-2"></i>
+            <span>Calendar</span>
+          </a>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-chart-line mr-2"></i>
+            <span>Stats</span>
+          </a>
+        </li>
+      </ul>
+      <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
+            <span class="block lg:hidden font-medium">Inbox</span>
+          </a>
+        </li>
+        <li>
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-3 align-items-center text-600 hover:text-900 hover:surface-100
+           font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <i class="pi pi-bell text-base lg:text-2xl mr-2 lg:mr-0 p-overlay-badge">
+              <Badge value="2"></Badge>
+            </i>
+            <span class="block lg:hidden font-medium">Notifications</span>
+          </a>
+        </li>
+        <li class="border-top-1 surface-border lg:border-top-none">
+          <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
+            <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
+            <div class="block lg:hidden">
+              <div class="text-900 font-medium">Josephine Lillard</div>
+              <span class="text-600 font-medium text-sm">Marketing Specialist</span>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import Badge from "primevue/badge"
+</script>
+
+<style scoped>
+
+</style>

package/front/src/ProseMirrorCollab.js

@@ -0,0 +1,21 @@
+import { Extension } from '@tiptap/core'
+import { collab } from 'prosemirror-collab'
+
+const ProseMirrorCollab = Extension.create({
+  addOptions() {
+    return {
+      version: 0,
+      clientID: ''
+    }
+  },
+  addProseMirrorPlugins() {
+    const version = this.options.version
+    const clientID = this.options.clientID
+    if(!clientID) throw new Error('prosemirror collab clientId is required')
+    return [
+      collab({ version, clientID }),
+    ]
+  },
+})
+
+export default ProseMirrorCollab

package/front/src/contentConfig.js

@@ -0,0 +1,50 @@
+import { h } from 'vue'
+import { Image } from "@live-change/image-frontend"
+
+export const basicMarks = {
+  bold: (m, c) => h('strong', {}, [ c ]),
+  italic: (m, c) => h('em', {}, [ c ]),
+  underline: (m, c) => h('u', {}, [ c ]),
+  strike: (m, c) => h('s', {}, [ c ])
+}
+
+export const plainTextNodes = {
+  doc: ({ content }, r) => h('div', { 'class': 'content' }, r(content)),
+
+  paragraph: ({ content }, r) => h('p', { }, r(content)),
+
+  text({ text, marks: ms }, r, marks) {
+    let res = text
+    if(ms) for(const mark of ms) {
+      const renderer = marks[mark.type]
+      if(!renderer) {
+        res = h('span', { style: 'color: red' }, `[unknown mark type ${mark.type}]`)
+      } else {
+        res = renderer(mark, res)
+      }
+    }
+    return res
+  }
+}
+
+export const messageNodes = {
+  ...plainTextNodes,
+
+  hardBreak: ({ content }) => h('br')
+}
+
+export const richEditorNodes = {
+  horizontalRule: ({ content }) => h('hr'),
+
+  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))),
+
+  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 }),
+
+  ...messageNodes
+}

package/front/src/contentConfigExtensions.js

@@ -0,0 +1,58 @@
+import Document from '@tiptap/extension-document'
+
+import Paragraph from "@tiptap/extension-paragraph"
+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 BulletList from "@tiptap/extension-bullet-list"
+import OrderedList from "@tiptap/extension-ordered-list"
+import ListItem from "@tiptap/extension-list-item"
+
+import Text from '@tiptap/extension-text'
+
+import Bold from '@tiptap/extension-bold'
+import Italic from '@tiptap/extension-italic'
+import Underline from "@tiptap/extension-underline"
+import Strike from "@tiptap/extension-strike"
+
+import ImageNode from "./ImageNode.js"
+
+
+export const marksExtensions = {
+  bold: [Bold],
+  italic: [Italic],
+  underline: [Underline],
+  strike: [Strike]
+}
+
+export const nodesExtensions = {
+  doc: [Document],
+  paragraph: [Paragraph],
+  text: [Text],
+
+  hardBreak: [HardBreak],
+  horizontalRule: [HorizontalRule],
+
+  heading: [Heading],
+  blockquote: [Blockqoute],
+  codeBlock:  [CodeBlock],
+
+  bulletList: [BulletList],
+  orderedList: [OrderedList],
+  listItem: [ListItem],
+
+  image: [ImageNode]
+}
+
+export function getExtensions(contentConfig) {
+  const extensions = []
+  for(const mark in contentConfig.marks) {
+    extensions.push(...marksExtensions[mark])
+  }
+  for(const node in contentConfig.nodes) {
+    extensions.push(...nodesExtensions[node])
+  }
+  return extensions
+}

package/front/src/entry-client.js

@@ -0,0 +1,6 @@
+import { clientEntry } from '@live-change/frontend-base/client-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
+
+
+clientEntry(App, createRouter)

package/front/src/entry-server.js

@@ -0,0 +1,6 @@
+import { serverEntry } from '@live-change/frontend-base/server-entry.js'
+import App from './App.vue'
+import { createRouter } from './router'
+
+const render = serverEntry(App, createRouter)
+export { render }

package/front/src/router.js

@@ -0,0 +1,44 @@
+import {
+  createMemoryHistory,
+  createRouter as _createRouter,
+  createWebHistory
+} from 'vue-router'
+
+import { dbAdminRoutes } from "@live-change/db-admin"
+
+export function wysiwygRoutes(config = {}) {
+  const { prefix = '/', route = (r) => r } = config
+  return [
+
+    route({
+      name: 'wysiwyg:editorWithPreview', path: prefix + '', meta: { },
+      component: () => import("./EditorWithPreview.vue"),
+      props: {
+      }
+    }),
+
+    route({
+      name: 'wysiwyg:documentEditor', path: prefix + 'collab', meta: { },
+      component: () => import("./DocumentEditorTest.vue"),
+      props: {
+      }
+    }),
+
+    ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) })
+
+  ]
+}
+
+export async function sitemap(route, api) {
+
+}
+
+
+export function createRouter(app, config) {
+  const router = _createRouter({
+    history: import.meta.env.SSR ? createMemoryHistory() : createWebHistory(),
+    routes: wysiwygRoutes(config)
+  })
+  return router
+}
+

package/front/src/schemaJson.js

@@ -0,0 +1,28 @@
+import { getSchema } from "@tiptap/core"
+import {getExtensions} from "./contentConfigExtensions";
+
+export function schemaTypesMapToObject(map) {
+  let obj = {}
+  for(let i = 0; i < map.content.length; i += 2) {
+    const value = map.content[i+1]
+    obj[map.content[i]] = {
+      ...value,
+      parseDOM: undefined
+    }
+  }
+  return obj
+}
+export function serializeSchema(schema) {
+  console.log("SERIALIZE", schema)
+  return JSON.parse(JSON.stringify({
+    marks: schemaTypesMapToObject(schema.marks),
+    nodes: schemaTypesMapToObject(schema.nodes),
+    topNode: schema.topNode
+  }, null, '  '))
+}
+
+export function getSchemaSpecFromConfig(config) {
+  const extensions = getExtensions(config)
+  const schema = getSchema(extensions)
+  return serializeSchema(schema.spec)
+}

package/front/vite.config.js

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+
+import baseViteConfig from '@live-change/frontend-base/vite-config.js'
+
+export default defineConfig(async ({ command, mode }) => {
+  const baseConfig = (await baseViteConfig({ command, mode }))
+  return {
+    ...baseConfig,
+
+    resolve: {
+      alias: [
+        ...baseConfig.resolve.alias,
+/*        { find: 'vue', replacement: 'vue/dist/vue.esm-bundler.js' },
+        { find: 'vue/server-renderer', replacement: 'vue/server-renderer' },*/
+      ]
+    }
+  }
+})

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "@live-change/wysiwyg-frontend",
+  "version": "0.0.3",
+  "scripts": {
+    "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
+    "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
+    "localDev": "lcli localDev --enableSessions",
+    "dev": "lcli dev --enableSessions",
+    "ssrDev": "lcli ssrDev --enableSessions",
+    "serveAllMem": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions --withDb --dbBackend mem --createDb",
+    "serveAll": "cross-env NODE_ENV=production lcli ssrServer --withApi --withServices --updateServices --enableSessions",
+    "serve": "cross-env NODE_ENV=production lcli ssrServer --enableSessions",
+    "apiServer": "lcli apiServer --enableSessions",
+    "devApiServer": "lcli devApiServer --enableSessions",
+    "memApiServer": "lcli memApiServer --enableSessions",
+    "build": "cd front; yarn build:client && yarn build:server",
+    "build:client": "cd front; vite build --ssrManifest --outDir dist/client",
+    "build:server": "cd front; vite build --ssr src/entry-server.js --outDir dist/server",
+    "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender",
+    "debug": "node --inspect-brk server"
+  },
+  "dependencies": {
+    "@live-change/framework": "0.6.5",
+    "@live-change/cli": "0.6.5",
+    "@live-change/dao": "0.4.13",
+    "@live-change/dao-vue3": "0.4.13",
+    "@live-change/dao-websocket": "0.4.13",
+    "@live-change/vue3-ssr": "0.2.14",
+    "@live-change/vue3-components": "0.2.12",
+    "@live-change/session-service": "0.2.39",
+    "@live-change/password-authentication-service": "0.2.39",
+    "@live-change/secret-link-service": "0.2.39",
+    "@live-change/secret-code-service": "0.2.39",
+    "@live-change/prosemirror-service": "0.2.39",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/compiler-sfc": "^3.2.33",
+    "@vueuse/core": "^8.3.1",
+    "v-shared-element": "3.1.0",
+    "vue3-scroll-border": "0.1.2",
+    "codeceptjs-assert": "^0.0.5",
+    "compression": "^1.7.4",
+    "cross-env": "^7.0.3",
+    "get-port-sync": "1.0.1",
+    "primeicons": "^5.0.0",
+    "primevue": "^3.15.0",
+    "primeflex": "^3.2.1",
+    "rollup-plugin-node-builtins": "^2.1.2",
+    "serialize-javascript": "^6.0.0",
+    "serve-static": "^1.15.0",
+    "vite": "^2.9.6",
+    "vue": "^3.2.33",
+    "vue-meta": "^3.0.0-alpha.9",
+    "vue-router": "^4.0.14",
+    "vite-plugin-compression": "0.5.1",
+    "vite-plugin-vue-images": "^0.6.1",
+    "rollup-plugin-visualizer": "5.6.0",
+    "@tiptap/vue-3": "2.0.0-beta.91",
+    "@tiptap/extension-blockquote": "^2.0.0-beta.29",
+    "@tiptap/extension-bold": "^2.0.0-beta.28",
+    "@tiptap/extension-bullet-list": "^2.0.0-beta.29",
+    "@tiptap/extension-code": "^2.0.0-beta.28",
+    "@tiptap/extension-code-block": "^2.0.0-beta.42",
+    "@tiptap/extension-document": "^2.0.0-beta.17",
+    "@tiptap/extension-dropcursor": "^2.0.0-beta.29",
+    "@tiptap/extension-gapcursor": "^2.0.0-beta.39",
+    "@tiptap/extension-hard-break": "^2.0.0-beta.33",
+    "@tiptap/extension-heading": "^2.0.0-beta.29",
+    "@tiptap/extension-history": "^2.0.0-beta.26",
+    "@tiptap/extension-horizontal-rule": "^2.0.0-beta.36",
+    "@tiptap/extension-italic": "^2.0.0-beta.28",
+    "@tiptap/extension-list-item": "^2.0.0-beta.23",
+    "@tiptap/extension-ordered-list": "^2.0.0-beta.30",
+    "@tiptap/extension-paragraph": "^2.0.0-beta.26",
+    "@tiptap/extension-strike": "^2.0.0-beta.29",
+    "@tiptap/extension-text": "^2.0.0-beta.17",
+    "@tiptap/extension-underline": "2.0.0-beta.23",
+    "@tiptap/extension-highlight": "^2.0.0-beta.33",
+    "prosemirror-collab": "^1.3.0",
+    "@fortawesome/fontawesome-free": "^6.1.1"
+  },
+  "devDependencies": {
+    "@live-change/codeceptjs-helper": "0.6.5",
+    "@wdio/selenium-standalone-service": "^7.19.5",
+    "codeceptjs": "^3.3.1",
+    "playwright": "^1.21.1",
+    "random-profile-generator": "^2.3.0",
+    "txtgen": "^3.0.1",
+    "generate-password": "1.7.0",
+    "webdriverio": "^7.19.5"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/server/init.js

@@ -0,0 +1,5 @@
+const app = require('@live-change/framework').app()
+
+module.exports = async function(services) {
+
+}