@live-change/wysiwyg-frontend 0.1.5 → 0.2.0

package/front/src/App.vue

@@ -23,10 +23,16 @@
   })
 
   import { watch } from 'vue'
-  import { client as useClient } from '@live-change/vue3-ssr'
+  import { client as useClient, useApi } from '@live-change/vue3-ssr'
   const client = useClient()
   watch(client, (newClient, oldClient) => {
     console.log("WATCH CLIENT", oldClient, '=>', newClient)
   })
 
+  const api = useApi()
+  import emailValidator from "@live-change/email-service/clientEmailValidator.js"
+  import passwordValidator from "@live-change/password-authentication-service/clientPasswordValidator.js"
+  api.validators.email = emailValidator
+  api.validators.password = passwordValidator
+
 </script>

package/front/src/DocumentEditor.vue

@@ -59,12 +59,11 @@
       content: props.initialContent,
       version: 0
     }
-    console.log(['prosemirror', 'createDocument'], documentData)
-    await api.command(['prosemirror', 'createDocument'], documentData)
+    documentData = await api.command(['prosemirror', 'createDocumentIfNotExists'], documentData)
   }
 
   const extensions = getExtensions(props.config)
-  console.log("CONFIG", props.config, 'EXTENSIONS', extensions)
+  //console.log("CONFIG", props.config, 'EXTENSIONS', extensions)
   const editor = useEditor({
     content: documentData.content,
     extensions: [
@@ -80,22 +79,64 @@
     }
   })
 
-  function save() {
+  let sentSteps = []
+  let sentVersion = 0
+
+  const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms))
+
+  async function save() {
     const state = editor.value.reactiveState.value
     const sendable = sendableSteps(state)
     if(sendable) {
+      let version = sendable.version
+      let firstOriginalStepIndex = 0
+      let resynchronization = false
       console.log("SENDABLE STEPS", sendable)
-      const serializedSteps = sendable.steps.map(step => step.toJSON())
+      const serializedSteps = sendable.steps.map((step, index) => ({ version: version + index, step: step.toJSON() }))
       console.log("SERIALIZED STEPS", serializedSteps)
-      api.command(['prosemirror', 'doSteps'], {
+      if(sendable.version <= sentVersion) { // found resend, check for duplicated steps
+        for(let i = 0; i < serializedSteps.length; i++) {
+          const step = serializedSteps[i]
+          const sentStep = sentSteps.find(({ version }) => version == step.version)
+          if(sentStep) {
+            console.log('FOUND SENT STEP WITH THE SAME VERSION', sentStep, '==', step)
+            if(JSON.stringify(sentStep) != JSON.stringify(step)) {
+              resynchronization = true
+              break
+            }
+            firstOriginalStepIndex = i + 1
+          } else break
+        }
+      }
+      serializedSteps.splice(0, firstOriginalStepIndex)
+      if(resynchronization && sentSteps.length > 0) {
+        console.log("RESYNCHRONIZATION!")
+        const firstVersion = serializedSteps[0].version
+        sentSteps = sentSteps.filter(({ version }) => version < firstVersion)
+      }
+      if(serializedSteps.length == 0) {
+        console.log("NOTHING TO SEND")
+        return
+      }
+      sentVersion = serializedSteps[0].version
+      sentSteps = sentSteps.concat(serializedSteps)
+      if(sentSteps.length > 200) sentSteps = sentSteps.slice(-100)
+      const data = {
         document, type: props.type,
-        version: sendable.version, steps: serializedSteps, window: api.windowId
-      })
+        version: sentVersion, steps: serializedSteps.map(({ step }) => step), window: api.windowId,
+        continuation: firstOriginalStepIndex > 0
+      }
+      console.log("SEND DATA", data)
+      //await sleep(1000)
+      await api.command(['prosemirror', 'doSteps'], data)
     }
   }
-
   const saveDebounced = useDebounceFn(save, 100)
 
+  api.source.on('connect', () => {
+    save()
+  })
+
   if(typeof window != 'undefined') {
     const stepsReader = inboxReader(
       (rawPosition, bucketSize) => {
@@ -123,6 +164,8 @@
     )
     onUnmounted(() => stepsReader.dispose())
   }
+
+  const schemaSpec = ref(getSchemaSpecFromConfig(props.config))
 </script>
 
 <style scoped>

package/front/src/NavBar.vue

@@ -102,4 +102,4 @@
 
 <style scoped>
 
-</style>
+</style>

package/front/src/schemaJson.js

@@ -1,5 +1,5 @@
 import { getSchema } from "@tiptap/core"
-import {getExtensions} from "./contentConfigExtensions";
+import { getExtensions } from "./contentConfigExtensions";
 
 export function schemaTypesMapToObject(map) {
   let obj = {}

package/index.js

@@ -0,0 +1,13 @@
+import * as config from './front/src/contentConfig.js'
+import * as extensions from './front/src/contentConfigExtensions.js'
+export { config, extensions }
+
+import ContentView from "./front/src/ContentView.js"
+export { ContentView }
+
+import DocumentEditor from "./front/src/DocumentEditor.vue"
+import Editor from "./front/src/Editor.vue"
+import EditorMenu from "./front/src/EditorMenu.vue"
+import ImageComponent from "./front/src/ImageComponent.vue"
+import ImageNode from "./front/src/ImageNode.js"
+export { DocumentEditor, Editor, EditorMenu, ImageComponent, ImageNode }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/wysiwyg-frontend",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "scripts": {
     "memDev": "lcli memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -21,18 +21,18 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
-    "@live-change/cli": "0.6.8",
-    "@live-change/dao": "0.5.0",
-    "@live-change/dao-vue3": "0.5.0",
-    "@live-change/dao-websocket": "0.5.0",
-    "@live-change/framework": "0.6.8",
-    "@live-change/password-authentication-service": "0.2.41",
-    "@live-change/prosemirror-service": "0.2.39",
-    "@live-change/secret-code-service": "0.2.41",
-    "@live-change/secret-link-service": "0.2.41",
-    "@live-change/session-service": "0.2.41",
-    "@live-change/vue3-components": "0.2.14",
-    "@live-change/vue3-ssr": "0.2.14",
+    "@live-change/cli": "0.6.14",
+    "@live-change/dao": "0.5.6",
+    "@live-change/dao-vue3": "0.5.6",
+    "@live-change/dao-websocket": "0.5.6",
+    "@live-change/framework": "0.6.14",
+    "@live-change/password-authentication-service": "0.2.51",
+    "@live-change/prosemirror-service": "0.2.51",
+    "@live-change/secret-code-service": "0.2.51",
+    "@live-change/secret-link-service": "0.2.51",
+    "@live-change/session-service": "0.2.51",
+    "@live-change/vue3-components": "0.2.15",
+    "@live-change/vue3-ssr": "0.2.15",
     "@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",
@@ -73,7 +73,7 @@
     "vue3-scroll-border": "0.1.2"
   },
   "devDependencies": {
-    "@live-change/codeceptjs-helper": "0.6.8",
+    "@live-change/codeceptjs-helper": "0.6.14",
     "@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": "ca3253bac1e9c01143244f5236bd40278a86ebaa"
+  "gitHead": "b7109dab79e452d391c00405c9a8108efda660d5"
 }

package/server/init.js

@@ -1,4 +1,5 @@
 const app = require('@live-change/framework').app()
+const {createUser} = require("@live-change/user-frontend/server/init-functions.js")
 
 module.exports = async function(services) {
 

package/server/services.config.js

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