gzkx-editor 0.0.0

package/core/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@gzkx-editor/core",
+  "version": "1.0.0",
+  "description": "GZKX Editor — all modules in one bundle",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "dist/"
+  ],
+  "dependencies": {
+    "orderedmap": "^2.0.0"
+  },
+  "scripts": {
+    "build": "node build.mjs"
+  }
+}

package/core/src/index.ts

@@ -0,0 +1,21 @@
+// Re-export everything from all workspace packages
+// The build script maps prosemirror-* to pre-compiled dist-src/*.js files
+export * from "prosemirror-model"
+export * from "prosemirror-transform"
+export * from "prosemirror-state"
+export * from "prosemirror-view"
+export * from "prosemirror-commands"
+export * from "prosemirror-keymap"
+export * from "prosemirror-inputrules"
+export * from "prosemirror-history"
+export * from "prosemirror-dropcursor"
+export * from "prosemirror-gapcursor"
+export * from "prosemirror-schema-basic"
+export * from "prosemirror-schema-list"
+export * from "prosemirror-menu"
+export * from "prosemirror-collab"
+export * from "prosemirror-example-setup"
+export * from "prosemirror-markdown"
+export * from "prosemirror-search"
+export * from "prosemirror-changeset"
+export * from "prosemirror-test-builder"

package/core/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "strict": true,
+    "noEmit": false,
+    "declaration": false,
+    "skipLibCheck": true,
+    "paths": {
+      "prosemirror-model": ["./src/model-shim.ts"],
+      "prosemirror-transform": ["./src/transform-shim.ts"],
+      "prosemirror-state": ["./src/state-shim.ts"],
+      "prosemirror-view": ["./src/view-shim.ts"],
+      "prosemirror-commands": ["./src/commands-shim.ts"],
+      "prosemirror-keymap": ["./src/keymap-shim.ts"],
+      "prosemirror-inputrules": ["./src/inputrules-shim.ts"],
+      "prosemirror-history": ["./src/history-shim.ts"],
+      "prosemirror-dropcursor": ["./src/dropcursor-shim.ts"],
+      "prosemirror-gapcursor": ["./src/gapcursor-shim.ts"],
+      "prosemirror-schema-basic": ["./src/schema-basic-shim.ts"],
+      "prosemirror-schema-list": ["./src/schema-list-shim.ts"],
+      "prosemirror-menu": ["./src/menu-shim.ts"],
+      "prosemirror-collab": ["./src/collab-shim.ts"],
+      "prosemirror-example-setup": ["./src/example-setup-shim.ts"],
+      "prosemirror-markdown": ["./src/markdown-shim.ts"],
+      "prosemirror-search": ["./src/search-shim.ts"],
+      "prosemirror-changeset": ["./src/changeset-shim.ts"],
+      "prosemirror-test-builder": ["./src/test-builder-shim.ts"]
+    }
+  },
+  "include": ["src/**/*.ts"]
+}

package/demo/bench/example.js

@@ -0,0 +1,75 @@
+const {schema, doc, p, ol, ul, li, h1, h2, blockquote, em, code, a} = require("prosemirror-model/test/build")
+
+exports.schema = schema
+
+let example = doc(
+  h1("Collaborative Editing in ProseMirror"),
+  p("This post describes the algorithm used to make collaborative editing work in ", a("ProseMirror"), ". For an introduction to ProseMirror, see ", a("another post"), " here."),
+  h2("The Problem"),
+  p("A real-time collaborative editing system is one where multiple people may work on a document at the same time. The system ensures that the documents stay synchronized—changes made by individual users are sent to other users, and show up in their representation of the document."),
+  p("Since transmitting changes over any kind of network is going to take time, the complexity of such systems lies in the way they handle concurrent updates. One solution is to allow users to lock the document (or parts of it) and thus prevent concurrent changes from happening at all. But this forces users to think about locks, and to wait when the lock they need is not available. We'd prefer not to do that."),
+  p("If we allow concurrent updates, we get situations where user A and user B both did something, unaware of the other user's actions, and now those things they did have to be reconciled. The actions might not interact at all—when they are editing different parts of the document—or interact very much—when they are trying to change the same word."),
+  h2("Operational Transformation"),
+  p("A lot of research has gone into this problem. And I must admit that, though I did read a bunch of papers, I definitely do not have a deep knowledge of this research, and if you find that I misrepresent something or am missing an interesting reference, I am very interested in an ", a("email"), " that tells me about it."),
+  p("A lot of this research is about truly distributed systems, where a group of nodes exchange messages among themselves, without a central point of control. The classical approach to the problem, which is called ", a("Operational Transformation"), ", is such a distributed algorithm. It defines a way to describe changes that has two properties:"),
+  ol(li(p("You can transform changes relative to other changes. So if user A inserted an “O” at offset 1, and user B concurrently inserted a “T” at offset 10, user A can transform B's change relative to its own change, an insert the “T” at offset 11, because an extra character was added in front of the change's offset.")),
+     li(p("No matter in which order concurrent changes are applied, you end up with the same document. This allows A to transform B's change relative to its own change, and B to transform A's change similarly, without the two users ending up with different documents."))),
+  p("An Operational Transformation (OT) based system applies local changes to the local document immediately, and broadcasts them to other users. Those users will transform and apply them when they get them. In order to know exactly which local changes a remote change should be transformed through, such a system also has to send along some representation of the state of the document at the time the change was made."),
+  p("That sounds relatively simple. But it is a nightmare to implement. Once you support more than a few trivial types of changes (things like “insert” and “delete”), ensuring that applying changes in any order produces the same document becomes very hard."),
+  p("Joseph Gentle, one of the engineers who worked on Google Wave, ", a("stated"), "..."), blockquote(p("Unfortunately, implementing OT sucks. There's a million algorithms with different trade-offs, mostly trapped in academic papers. The algorithms are really hard and time consuming to implement correctly.")),
+  h2("Centralization"),
+  p("The design decisions that make the OT mechanism complex largely stem from the need to have it be truly distributed. Distributed systems have nice properties, both practically and politically, and they tend to be interesting to work on."),
+  p("But you can save oh so much complexity by introducing a central point. I am, to be honest, extremely bewildered by Google's decision to use OT for their Google Docs—a centralized system."),
+  p("ProseMirror's algorithm is centralized, in that it has a single node (that all users are connected to) making decisions about the order in which changes are applied. This makes it relatively easy to implement and to reason about."),
+  p("And I don't actually believe that this property represents a huge barrier to actually running the algorithm in a distributed way. Instead of a central server calling the shots, you could use a consensus algorithm like ", a("Raft"), " to pick an arbiter. (But note that I have not actually tried this.)"),
+  h2("The Algorithm"),
+  p("Like OT, ProseMirror uses a change-based vocabulary and transforms changes relative to each other. Unlike OT, it does not try to guarantee that applying changes in a different order will produce the same document."),
+  p("By using a central server, it is possible—easy even—to have clients all apply changes in the same order. You can use a mechanism much like the one used in code versioning systems. When a client has made a change, they try to ", em("push"), " that change to the server. If the change was based on the version of the document that the server considers current, it goes through. If not, the client must ", em("pull"), " the changes that have been made by others in the meantime, and ", em("rebase"), " their own changes on top of them, before retrying the push."),
+  p("Unlike in git, the history of the document is linear in this model, and a given version of the document can simply be denoted by an integer."),
+  p("Also unlike git, all clients are constantly pulling (or, in a push model, listening for) new changes to the document, and track the server's state as quickly as the network allows."),
+  p("The only hard part is rebasing changes on top of others. This is very similar to the transforming that OT does. But it is done with the client's ", em("own"), " changes, not remote changes."),
+  p("Because applying changes in a different order might create a different document, rebasing isn't quite as easy as transforming all of our own changes through all of the remotely made changes."),
+  h2("Position Mapping"),
+  p("Whereas OT transforms changes relative to ", em("other changes"), ", ProseMirror transforms them using a derived data structure called a ", em("position map"), ". Whenever you apply a change to a document, you get a new document and such a map, which you can use to convert positions in the old document to corresponding positions in the new document. The most obvious use case of such a map is adjusting the cursor position so that it stays in the same conceptual place—if a character was inserted before it, it should move forward along with the surrounding text."),
+  p("Transforming changes is done entirely in terms of mapping positions. This is nice—it means that we don't have to write change-type-specific transformation code. Each change has one to three positions associated with it, labeled ", code("from"), ", ", code("to"), ", and ", code("at"), ". When transforming the change relative to a given other change, those positions get mapped through the other change's position map."),
+  p("For example, if a character is inserted at position 5, the change “delete from 10 to 14” would become “delete from 11 to 15” when transformed relative to that insertion."),
+  p("Every change's positions are meaningful only in the exact document version that it was originally applied to. A position map defines a mapping between positions in the two document versions before and after a change. To be able to apply a change to a different version, it has to be mapped, step by step, through the changes that lie between its own version and the target version."),
+  p("(For simplicity, examples will use integers for positions. Actual positions in ProseMirror consist of an integer offset in a paragraph plus the path of that paragraph in the document tree.)"),
+  h2("Rebasing Positions"),
+  p("An interesting case comes up when a client has multiple unpushed changes buffered. If changes from a peer come in, all of the locally buffered changes have to be moved on top of those changes. Say we have local changes ", em("L1"), " and ", em("L2"), ", and are rebasing them onto remote changes ", em("R1"), " and ", em("R2"), ", where ", em("L1"), " and ", em("R1"), " start from the same version of the document."),
+  p("First, we apply R1 and R2 to our representation of that original version (clients must track both the document version they are currently displaying, which includes unsent changes, and the version that does not yet include those changes). This creates two position maps ", em("mR1"), " and ", em("mR2"), "."),
+  p("We can simply map ", em("L1"), " forward through those maps to arrive at ", em("L1⋆"), ", the remapped version of ", em("L1"), ". But ", em("L2"), " was based on the document that existed after applying ", em("L1"), ", so we first have to map it ", em("backwards"), " through ", em("mL1"), ", the original map created by applying ", em("L1"), ". Now it refers to the same version that ", em("R1"), " starts in, so we can map it forward through ", em("mR1"), " and ", em("mR2"), ", and then finally though ", em("mL1⋆"), ", the map created by applying ", em("L1⋆"), ". Now we have ", em("L2⋆"), ", and can apply it to the output of applying ", em("L1⋆"), ", and ", em("voila"), ", we have rebased two changes onto two other changes."),
+  p("Except that mapping through deletions or backwards through insertions loses information. If you insert two characters at position 5, and then another one at position 6 (between the two previously inserted characters), mapping backwards and then forward again through the first insertion will leave you before or after the characters, because the position between them could not be expressed in the coordinate space of a document that did not yet have these characters."),
+  p("To fix this, the system uses mapping pipelines that are not just a series of maps, but also keep information about which of those maps are mirror images of each other. When a position going through such a pipeline encounters a map that deletes the content around the position, the system scans ahead in the pipeline looking for a mirror images of that map. If such a map is found, we skip forward to it, and restore the position in the content that is inserted by this map, using the relative offset that the position had in the deleted content. A mirror image of a map that deletes content must insert content with the same shape."),
+  h2("Mapping Bias"),
+  p("Whenever content gets inserted, a position at the exact insertion point can be meaningfully mapped to two different positions: before the inserted content, or after it. Sometimes the first is appropriate, sometimes the second. The system allows code that maps a position to choose what bias it prefers."),
+  p("This is also why the positions associated with a change are labeled. If a change with ", code("from"), " and ", code("to"), " positions, such as deleting or styling a piece of the document, has content inserted directly before or after it, that content should not be included in the change. So ", code("from"), " positions get mapped with a forward bias, and ", code("to"), " positions with a backward bias."),
+  p("When a change is mapped through a map that completely contains it, for example when inserting a character at position 5 is mapped through the map created by deleting from position 2 to 10, the whole change is simply dropped, since the context in which it was made no longer exists."),
+  h2("Types of Changes"),
+  p("An atomic change in ProseMirror is called a ", em("step"), ". Some things that look like single changes from a user interface perspective are actually decomposed into several steps. For example, if you select text and press enter, the editor will generate a ", em("delete"), " step that removes the selected text, and then a ", em("split"), " step that splits the current paragraph."),
+  p("These are the step types that exist in ProseMirror:"),
+  ul(li(p("", code("addStyle"), " and ", code("removeStyle"), " add and remove inline styling to or from a piece of the document. They take ", code("from"), " and ", code("to"), " positions.")),
+     li(p("", code("split"), " splits a node in two. It can be used, for example, to split a paragraph when the user presses enter. It takes a single ", code("at"), " position.")),
+     li(p("", code("join"), " joins two adjacent nodes. This only works if they contain the same type of content. It takes ", code("from"), " and ", code("to"), " positions that should refer to the end and start of the nodes to be joined. (This is to make sure that the nodes that were actually intended are being joined. The step is ignored when another node has been inserted between them in the meantime.)")),
+     li(p("", code("ancestor"), " is used to change the type of a node and to add or remove nodes above it. It can be used to wrap something in a list, or to convert from a paragraph to a heading. It takes ", code("from"), " and ", code("to"), " positions pointing at the start and end of the node.")),
+     li(p("", code("replace"), " replaces a piece of the document with zero or more replacement nodes, and optionally stitches up compatible nodes at the edges of the cut. Its ", code("from"), " and ", code("to"), " positions define the range that should be deleted, and its ", code("at"), " position gives the place where the new nodes should be inserted."))),
+  p("The last type is more complex than the other ones, and my initial impulse was to split it up into steps that remove and insert content. But because the position map created by a replace step needs to treat the step as atomic (positions have to be pushed out of ", em("all"), " replaced content), I got better results with making it a single step."),
+  h2("Intention"),
+  p("An essential property of real-time collaborative systems is that they try to preserve the ", em("intention"), " of a change. Because “merging” of changes happens automatically, without user interaction, it would get very annoying when the changes you make are, through rebasing, reinterpreted in a way that does not match what you were trying to do."),
+  p("I've tried to define the steps and the way in which they are rebased in so that rebasing yields unsurprising behavior. Most of the time, changes don't overlap, and thus don't really interact. But when they overlap, we must make sure that their combined effect remains sane."),
+  p("Sometimes a change must simply be dropped. When you type into a paragraph, but another user deleted that paragraph before your change goes through, the context in which your input made sense is gone, and inserting it in the place where the paragraph used to be would create a meaningless fragment."),
+  p("If you tried to join two lists together, but somebody has added a paragraph between them, your change becomes impossible to execute (you can't join nodes that aren't adjacent), so it is dropped."),
+  p("In other cases, a change is modified but stays meaningful. If you made characters 5 to 10 strong, and another user inserted a character at position 7, you end up making characters 5 to 11 strong."),
+  p("And finally, some changes can overlap without interacting. If you make a word a link and another user makes it emphasized, both of your changes to that same word can happen in their original form."),
+  h2("Offline Work"),
+  p("Silently reinterpreting or dropping changes is fine for real-time collaboration, where the feedback is more or less immediate—you see the paragraph that you were editing vanish, and thus know that someone deleted it, and your changes are gone."),
+  p("For doing offline work (where you keep editing when not connected) or for a branching type of work flow, where you do a bunch of work and ", em("then"), " merge it with whatever other people have done in the meantime, the model I described here is useless (as is OT). It might silently throw away a lot of work (if its context was deleted), or create a strange mishmash of text when two people edited the same sentence in different ways."),
+  p("In cases like this, I think a diff-based approach is more appropriate. You probably can't do automatic merging—you have to identify conflicts had present them to the user to resolve. I.e. you'd do what git does."),
+  h2("Undo History"),
+  p("How should the undo history work in a collaborative system? The widely accepted answer to that question is that it definitely should ", em("not"), " use a single, shared history. If you undo, the last edit that ", em("you"), " made should be undone, not the last edit in the document."),
+  p("This means that the easy way to implement history, which is to simply roll back to a previous state, does not work. The state that is created by undoing your change, if other people's changes have come in after it, is a new one, not seen before."),
+  p("To be able to implement this, I had to define changes (steps) in such a way that they can be inverted, producing a new step that represents the change that cancels out the original step."),
+  p("ProseMirror's undo history accumulates inverted steps, and also keeps track of all position maps between them and the current document version. These are needed to be able to map the inverted steps to the current document version."),
+  p("A downside of this is that if a user has made a change but is now idle while other people are editing the document, the position maps needed to move this user's change to the current document version pile up without bound. To address this, the history periodically ", em("compacts"), " itself, mapping the inverted changes forward so that they start at the current document again. It can then discard the intermediate position maps.")
+)
+exports.example = example

package/demo/bench/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<meta charset=utf8>
+<title>ProseMirror benchmarks</title>
+
+<div id="buttons"></div>
+
+<p><label><input type=checkbox id=profile> Profile</label></p>
+
+<div id="workspace" style="height: 0; overflow: hidden"></div>
+
+<script src="/moduleserve/load.js" data-module="./index" data-require></script>

package/demo/bench/index.js

@@ -0,0 +1,67 @@
+const {Fragment} = require("prosemirror-model")
+const {doc, blockquote, p} = require("prosemirror-model/test/build")
+const {EditorState} = require("prosemirror-state")
+const {EditorView} = require("prosemirror-view")
+const {history} = require("prosemirror-history")
+
+const {example} = require("./example")
+const {typeDoc} = require("./type")
+const {mutateDoc} = require("./mutate")
+
+function button(name, run) {
+  var dom = document.createElement("button")
+  dom.textContent = name
+  dom.addEventListener("click", run)
+  return dom
+}
+
+function group(name, ...buttons) {
+  var wrap = document.querySelector("#buttons").appendChild(document.createElement("p"))
+  wrap.textContent = name
+  wrap.append(document.createElement("br"))
+  buttons.forEach(b => wrap.append(" ", b))
+}
+
+function run(bench, options) {
+  var t0 = Date.now(), steps = 0
+  var startState = (options.state || options.view) && EditorState.create({doc: options.doc, plugins: options.plugins})
+  var view = options.view && new EditorView(document.querySelector("#workspace"), {state: startState})
+  var state, callback = tr => {
+    ++steps
+    if (state) {
+      state = state.applyAction({type: "transform", time: Date.now(), transform: tr})
+      if (view) view.updateState(state)
+    }
+  }
+  var profile = document.querySelector("#profile").checked
+  if (profile) console.profile(options.name)
+  for (var i = 0, e = options.repeat || 1; i < e; i++) {
+    state = startState
+    bench(options, callback)
+  }
+  if (profile) console.profileEnd(options.name)
+  console.log("'" + options.name + "' took " + (Date.now() - t0) + "ms for " + steps + " steps")
+}
+
+group("Type out a document", button("Plain", () => {
+  run(typeDoc, {doc: example, name: "Type plain", profile: true, repeat: 6})
+}), button("State", () => {
+  run(typeDoc, {doc: example, name: "Type with state", profile: true, repeat: 6, state: true})
+}), button("State + History", () => {
+  run(typeDoc, {doc: example, name: "Type with state + history", profile: true, repeat: 6, state: true, plugins: [history()]})
+}), button("View", () => {
+  run(typeDoc, {doc: example, name: "Type with view", profile: true, repeat: 6, state: true, view: true})
+}))
+
+group("Mutate inside a document", button("small + shallow", () => {
+  run(mutateDoc, {doc: doc(p("a"), p("b"), p("c")),
+                  pos: 4, n: 100000, name: "Mutate small + shallow"})
+}), button("small + deep", () => {
+  run(mutateDoc, {doc: doc(p("a"), blockquote(blockquote(blockquote(blockquote(blockquote(blockquote(p("b"))))))), p("c")),
+                  pos: 10, n: 100000, name: "Mutate small + deep"})
+}), button("large + shallow", () => {
+  var d = doc(p("a")), many = []
+  for (var i = 0; i < 1000; i++) many.push(d.firstChild)
+  run(mutateDoc, {doc: d.copy(Fragment.from(many)),
+                  pos: 4, n: 100000, name: "Mutate large + shallow"})
+}))

package/demo/bench/mutate.js

@@ -0,0 +1,14 @@
+const {Slice, Fragment} = require("prosemirror-model")
+const {Transform} = require("prosemirror-transform")
+
+function mutateDoc(options, callback) {
+  var doc = options.doc, pos = options.pos, slice = new Slice(Fragment.from(doc.type.schema.text("X")), 0, 0)
+  for (var i = 0; i < options.n; i++) {
+    var add = new Transform(doc).replace(pos, pos, slice)
+    callback(add)
+    var rem = new Transform(add.doc).delete(pos, pos + 1)
+    callback(rem)
+    doc = rem.doc
+  }
+}
+exports.mutateDoc = mutateDoc

package/demo/bench/type.js

@@ -0,0 +1,40 @@
+const {Transform} = require("prosemirror-transform")
+
+function typeDoc(options, callback) {
+  var example = options.doc, schema = example.type.schema
+  var doc = schema.nodes.doc.createAndFill(), pos = 0
+
+  function scan(node, depth) {
+    if (node.isText) {
+      for (var i = 0; i < node.text.length; i++) {
+        var tr = new Transform(doc).replaceRangeWith(pos, pos, schema.text(node.text.charAt(i), node.marks))
+        callback(tr)
+        doc = tr.doc
+        pos++
+      }
+    } else if (pos < doc.content.size - depth) {
+      pos++
+      scanContent(node, depth + 1)
+      pos++
+    } else {
+      if (node.isLeaf) {
+        var tr = new Transform(doc).replaceRangeWith(pos, pos, node)
+        callback(tr)
+        doc = tr.doc
+        pos += node.nodeSize
+      } else {
+        var tr = new Transform(doc).replaceRangeWith(pos, pos, node.type.createAndFill())
+        callback(tr)
+        doc = tr.doc
+        pos++
+        scanContent(node, depth + 1)
+        pos++
+      }
+    }
+  }
+  function scanContent(node, depth) {
+    node.forEach(child => scan(child, depth))
+  }
+  scanContent(example, 0)
+}
+exports.typeDoc = typeDoc

package/demo/demo.css

@@ -0,0 +1,33 @@
+body {
+  font-family: Georgia;
+  margin: 0 1em 2em;
+}
+
+textarea {
+  width: 100%;
+  border: 1px solid silver;
+  min-height: 40em;
+  padding: 4px 8px;
+}
+
+.left, .right {
+  width: 50%;
+  float: left;
+}
+
+.full {
+  max-width: 50em;
+}
+
+.marked {
+  background: #ff6
+}
+
+.ProseMirror-menubar-wrapper {
+  border: 1px solid silver;
+}
+
+.ProseMirror {
+  padding: 4px 8px 4px 14px;
+  line-height: 1.2;
+}

package/demo/demo.ts

@@ -0,0 +1,16 @@
+import {Schema, DOMParser} from "prosemirror-model"
+import {EditorView} from "prosemirror-view"
+import {EditorState} from "prosemirror-state"
+import {schema} from "prosemirror-schema-basic"
+import {addListNodes} from "prosemirror-schema-list"
+import {exampleSetup} from "prosemirror-example-setup"
+
+const demoSchema = new Schema({
+  nodes: addListNodes(schema.spec.nodes as any, "paragraph block*", "block"),
+  marks: schema.spec.marks
+})
+
+let state = EditorState.create({doc: DOMParser.fromSchema(demoSchema).parse(document.querySelector("#content")!),
+                                plugins: exampleSetup({schema: demoSchema})})
+
+;(window as any).view = new EditorView(document.querySelector(".full"), {state})

package/demo/example-setup/style/style.css

@@ -0,0 +1,83 @@
+/* Add space around the hr to make clicking it easier */
+
+.ProseMirror-example-setup-style hr {
+  padding: 2px 10px;
+  border: none;
+  margin: 1em 0;
+}
+
+.ProseMirror-example-setup-style hr:after {
+  content: "";
+  display: block;
+  height: 1px;
+  background-color: silver;
+  line-height: 2px;
+}
+
+.ProseMirror ul, .ProseMirror ol {
+  padding-left: 30px;
+}
+
+.ProseMirror blockquote {
+  padding-left: 1em;
+  border-left: 3px solid #eee;
+  margin-left: 0; margin-right: 0;
+}
+
+.ProseMirror-example-setup-style img {
+  cursor: default;
+}
+
+.ProseMirror-prompt {
+  background: white;
+  padding: 5px 10px 5px 15px;
+  border: 1px solid silver;
+  position: fixed;
+  border-radius: 3px;
+  z-index: 11;
+  box-shadow: -.5px 2px 5px rgba(0, 0, 0, .2);
+}
+
+.ProseMirror-prompt h5 {
+  margin: 0;
+  font-weight: normal;
+  font-size: 100%;
+  color: #444;
+}
+
+.ProseMirror-prompt input[type="text"],
+.ProseMirror-prompt textarea {
+  background: #eee;
+  border: none;
+  outline: none;
+}
+
+.ProseMirror-prompt input[type="text"] {
+  padding: 0 4px;
+}
+
+.ProseMirror-prompt-close {
+  position: absolute;
+  left: 2px; top: 1px;
+  color: #666;
+  border: none; background: transparent; padding: 0;
+}
+
+.ProseMirror-prompt-close:after {
+  content: "✕";
+  font-size: 12px;
+}
+
+.ProseMirror-invalid {
+  background: #ffc;
+  border: 1px solid #cc7;
+  border-radius: 4px;
+  padding: 5px 10px;
+  position: absolute;
+  min-width: 10em;
+}
+
+.ProseMirror-prompt-buttons {
+  margin-top: 5px;
+  display: none;
+}

package/demo/gapcursor/style/gapcursor.css

@@ -0,0 +1,25 @@
+.ProseMirror-gapcursor {
+  display: none;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror-gapcursor:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: -2px;
+  width: 20px;
+  border-top: 1px solid black;
+  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;
+}
+
+@keyframes ProseMirror-cursor-blink {
+  to {
+    visibility: hidden;
+  }
+}
+
+.ProseMirror-focused .ProseMirror-gapcursor {
+  display: block;
+}

package/demo/index.html

@@ -0,0 +1,75 @@
+<!doctype html>
+
+<meta charset="utf-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>GZKX Editor demo page</title>
+<link rel=stylesheet href="demo.css">
+<link rel=stylesheet href="view/style/prosemirror.css">
+<link rel=stylesheet href="menu/style/menu.css">
+<link rel=stylesheet href="example-setup/style/style.css">
+<link rel=stylesheet href="gapcursor/style/gapcursor.css">
+
+<h1>GZKX Editor demo page</h1>
+
+<div class="full"></div>
+
+<div id=content style="display: none">
+<h2>Demonstration Text</h2>
+
+<p>A GZKX Editor document is based on a schema, which determines the
+kind of elements that may occur in it, and the relation they have to
+each other. This one is based on the basic schema, with lists and
+tables added. It allows the usual <strong>strong</strong>
+and <em>emphasized</em> text, <code>code font</code>,
+and <a href="http://marijnhaverbeke.nl">links</a>. There are also
+images: <img alt="demo picture" src="img.png">.</p>
+
+<p>On the block level you can have:</p>
+
+<ol>
+  <li>Ordered lists (such as this one)</li>
+  <li>Bullet lists</li>
+  <li>Blockquotes</li>
+  <li>Code blocks</li>
+  <li>Tables</li>
+  <li>Horizontal rules</li>
+</ol>
+
+<p>It isn't hard to define your own custom elements, and include them
+in your schema. These can be opaque 'leaf' nodes, that the user
+manipulates through extra interfaces you provide, or nodes with
+regular editable child nodes.</p>
+
+<hr>
+
+<h2>The Model</h2>
+
+<p>Nodes can nest arbitrarily deep. Thus, the document forms a tree,
+not dissimilar to the browser's DOM tree.</p>
+
+<p>At the inline level, the model works differently. Each block of
+text is a single node containing a flat series of inline elements.
+These are serialized as a tree structure when outputting HTML.</p>
+
+<p>Positions in the document are represented as a path (an array of
+offsets) through the block tree, and then an offset into the inline
+content of the block. Blocks that have no inline content (such as
+horizontal rules and HTML blocks) can not have the cursor inside of
+them. User-exposed operations on the document preserve the invariant
+that there is always at least a single valid cursor position.</p>
+
+<hr>
+
+<h2>Examples</h2>
+
+<blockquote><blockquote><p>We did not see a nested blockquote
+yet.</p></blockquote></blockquote>
+
+<pre><code class="lang-markdown">Nor did we see a code block
+
+Note that the content of a code block can't be styled.</code></pre>
+
+<p>This paragraph has<br>a hard break inside of it.</p>
+</div>
+
+<script type=module src="_m/demo.js"></script>