how to use fiduswriter track changes module in prosemirror node project

[milahu]

took some hours to "fix" this ... also tried import-js but fails on dynamic imports

i just wanted to import the ModTrack module in my npm + vite + browser project
since its a good clone of alternative to ckeditor5 Track changes

#!/usr/bin/env bash

# in src/fiduswriter/fiduswriter

# symlink all files into the document package
find . -mindepth 2 -name '*.js' | cut -d/ -f2 | uniq | grep -v document \
| while read dir; do cp -asv "$(readlink -f $dir)"/*/ ./document/; done

# symlink init.js to index.js
find . -name init.js | while read f; do
  d=$(dirname "$f");
  if [ -f "$d/index.js" ]; then echo "skip $f"; continue; fi;
  echo "$d";
  ln -sv init.js $d/index.js;
done

# Uncaught ReferenceError: gettext is not defined
# see fiduswriter/fiduswriter/document/management/commands/export_schema.py
# prepend "var gettext = ..." before first line
sed -i.bak '1s;^;var gettext = () => undefined\n\n;' document/static/js/modules/*/*.js
sed -i.bak '1s;^;var gettext = () => undefined\n\n;' document/static/js/modules/*/*/*.js
sed -i.bak '1s;^;var gettext = () => undefined\n\n;' document/static/js/modules/*/*/*/*.js

false && {

# in project root
# fix unknown file extension csljson
# no idea how to tell vite/rollup to use a "file-loader" for csljson files
# as suggested for webpack at https://github.com/fiduswriter/citeproc-plus

mmv 'node_modules/citeproc-plus/dist/assets/*.csljson' \
'node_modules/citeproc-plus/dist/assets/#1.csl.json'

sed -i.bak -E 's|assets/([^"]+)\.csljson"|assets/\1.csl.json"|g' \
node_modules/citeproc-plus/dist/*.js \
node_modules/citeproc-plus/dist/*/*.js

}

[johanneswilm]

Hey, first for the record - I was not aware of the existence of Ckeditor 5 track changes and therefore it's not something I copied/cloned either.

Next - if you think the track changes code is helpful for your (and likely other) projects - I'd be willing to turn that party into an npm package of its own so that it's easier for others to reuse.

Third - for anyone else wondering if this is to fix a bug in Fidus Writer: It is not. Iy's just a script to make a part of Fidus Writer work in another project.

[milahu]

thanks for the quick reply : )

for the record - I was not aware of the existence of Ckeditor 5 track changes and therefore it's not something I copied/cloned either.

same : D i started live-diff-html-editor from scratch,
until i noticed that i will need a more complete editor to edit the markup.
ckeditor's track changes demo was one of the few demos
where i said "yupp! thats what i want" (but open source)

for anyone else wondering if this is to fix a bug in Fidus Writer: It is not.

... but im curious:
how do these import paths work in your setup?
do you also merge the packages into one folder?
or do you add resolve paths? (not sure how this could work with this folder layout)

if you think the track changes code is helpful for your (and likely other) projects - I'd be willing to turn that party into an npm package of its own so that it's easier for others to reuse.

you would have at least one user ; )
but i got the track module to work with my prosemirror:

import "prosemirror-view/style/prosemirror.css" // set white-space: pre-wrap, etc
import "prosemirror-menu/style/menu.css"
import "prosemirror-example-setup/style/style.css" // .ProseMirror-prompt, etc

/* minimal css for fiduswriter ModTrack
  span.approved-insertion {
    background-color: rgba(0, 255, 0, 0.5);
  }
  span.approved-deletion {
    background-color: rgba(255, 0, 0, 0.5);
  }
*/

import {EditorState, Plugin} from "prosemirror-state"
import {EditorView} from "prosemirror-view"
import {Schema, DOMParser} from "prosemirror-model"
import {schema} from "prosemirror-schema-basic"

// patched version to create a custom menuBar
import {exampleSetup} from "./github.com/ProseMirror/prosemirror-example-setup/src/index.js"

// develop branch of fiduswriter
import { ModTrack, amendTransaction } from "./github.com/fiduswriter/fiduswriter--develop/fiduswriter/document/static/js/modules/editor/track/index.js"
import * as FiduswriterSchemaTrack from "./github.com/fiduswriter/fiduswriter--develop/fiduswriter/document/static/js/modules/schema/common/track.js"

// needed to show/hide the menuBar on focus/blur
// https://discuss.prosemirror.net/t/handling-focus-in-plugins/1981/6
import { focusPlugin } from "./discuss.prosemirror.net/focus-plugin.js"

class TextEditor {

  constructor() {
    // just get one <span> element for testing
    const langSpan = Array.prototype.filter.apply(document.querySelectorAll('span[lang="de"]'), [e => e.style.display != 'none'])[4];

    const docSchema = new Schema({
      nodes: schema.spec.nodes,
      marks: {
        ...schema.spec.marks,

        insertion: FiduswriterSchemaTrack.insertion,
        deletion: FiduswriterSchemaTrack.deletion,
        format_change: FiduswriterSchemaTrack.format_change,
        // TODO function FiduswriterSchemaTrack.parseTracks ?
      },
    })

    var plugins = exampleSetup({
      schema: docSchema,
      menuBar: true,
      floatingMenu: true,
    });

    plugins.push(focusPlugin);

    // replace document with editor
    const editorElement = document.createElement('span');
    editorElement.classList.add('text-editor')
    editorElement.setAttribute('lang', langSpan.getAttribute('lang'))
    langSpan.parentNode.insertBefore(editorElement, langSpan);
    langSpan.style.display = 'none';
    langSpan.classList.add('edit-original')

    // fiduswriter/fiduswriter/document/static/js/modules/editor/index.js initEditor
    let setFocus = false
    //this.app = {}; // not needed?
    this.clientTimeAdjustment = 0; // needed in amend_transaction.js
    this.user = { id: 0, username: "root" }; // needed in amend_transaction.js
    this.mod = {}; // modules
    this.source = langSpan; // source of my document, e.g. <span lang="en">hello</span>
    this.docInfo = {};
    this.docInfo.updated = null;
    this.schema = docSchema
    this.view = new EditorView(
      editorElement, {
      state: EditorState.create({
        doc: DOMParser.fromSchema(this.schema).parse(this.source),
        plugins,
      }),
      handleDOMEvents: {
        focus: (view, _event) => {
          console.log(`TextEditor focus`)
          if (!setFocus) {
            this.currentView = this.view
            // We focus once more, as focus may have disappeared due to
            // disappearing placeholders.
            setFocus = true
            view.focus()
            setFocus = false
          }
        }
      },
      dispatchTransaction: tr => {
        console.log(`TextEditor dispatchTransaction`)
        const trackedTr = amendTransaction(tr, this.view.state, this)
        const {state: newState, transactions} = this.view.state.applyTransaction(trackedTr)
        this.view.updateState(newState)
        /*
        transactions.forEach(subTr => {
          const footTr = subTr.getMeta('footTr')
          if (footTr) {
            this.mod.footnotes.fnEditor.view.dispatch(footTr)
          }
        })
        */
        if (tr.steps) {
          this.docInfo.updated = new Date()
        }
        //this.mod.collab.doc.sendToCollaborators()
      }
    })
    this.currentView = this.view

    new ModTrack(this);
  }
}

document.body.onload = function () {
  new TextEditor();
}

... except the deletions are not visible,
cos tr.getMeta('inputType') is missing in function trackedTransaction
setMeta('inputType' is called in modules/editor/keymap.js

-> im stuck. no idea why setMeta is not called in my code
https://github.com/milahu/prosemirror-track-changes-demo
edit: setMeta was called, but i needed this.docInfo.access_rights = 'write-tracked'

my use case:
im writing a book which i publish on github, and i want to allow my readers to edit + annotate the book in place.
i want something like a "high latency collab editor", with github-issues (and email) as data store,
and with localStorage as offline cache,
so i need to visualize <ins> and <del> from different users, probably in different colors
other design goals: compile to a single html file, work offline, self-hosted

[johanneswilm]

how do these import paths work in your setup?
do you also merge the packages into one folder?
or do you add resolve paths? (not sure how this could work with this folder layout)

Yes, so for linting purposes, it uses resolve paths, but for creating the actual page, it merges the folders. The point of doing this is that it is the way it works for the backend files (in Python) and it allows adding extra folders as plugins that then also get merged in. For example, there is a fiduswriter-books plugin that adds a book folder and if compiled with that, it merges the book stuff together with the rest of it.

[johanneswilm]

but i got the track module to work with my prosemirror

Oh wow. I'm surprised that is working. Note that we are adding tracking information both for inline and block content - and you are currently just using the inline part.

Also note that we have about 2 Fidus Writer releases per year. So the develop branch will turn inoot the master/main branch some time in the near future. I don't think there is much related to track changes in the latest version.

[milahu]

success : D

prosemirror-track-changes-demo (source)

bundle size:

72K     assets/index.352e4dcf.js
588K    assets/mathlive.09904145.js
584K    assets/vendor.26614ef1.js

excluded:
32M     assets/csljson/

could be worse ... factoring-out the change-tracking module is low priority