aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--package-lock.json25
-rw-r--r--package.json3
-rw-r--r--src/client/util/RichTextSchema.tsx223
-rw-r--r--src/client/util/TooltipTextMenu.scss54
-rw-r--r--src/client/util/TooltipTextMenu.tsx125
-rw-r--r--src/client/views/nodes/DocumentView.scss2
-rw-r--r--src/client/views/nodes/FormattedTextBox.scss16
-rw-r--r--src/client/views/nodes/FormattedTextBox.tsx14
8 files changed, 459 insertions, 3 deletions
diff --git a/package-lock.json b/package-lock.json
index acb9d4099..2431af561 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,21 @@
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz",
"integrity": "sha512-ATBRyKJw1d2ko+0DWN9+BXau0EK3I/Q6pPzPv3LhJD7r052YFAkAdfb1Bd7ZqhBsJrdse/S7jKxWUOZ61qBD4g=="
},
+ "@fortawesome/fontawesome-free-solid": {
+ "version": "5.0.13",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz",
+ "integrity": "sha512-b+krVnqkdDt52Yfev0x0ZZgtxBQsLw00Zfa3uaVWIDzpNZVtrEXuxldUSUaN/ihgGhSNi8VpvDAdNPVgCKOSxw==",
+ "requires": {
+ "@fortawesome/fontawesome-common-types": "^0.1.7"
+ },
+ "dependencies": {
+ "@fortawesome/fontawesome-common-types": {
+ "version": "0.1.7",
+ "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
+ "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
+ }
+ }
+ },
"@fortawesome/fontawesome-svg-core": {
"version": "1.2.15",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.15.tgz",
@@ -330,6 +345,16 @@
"@types/prosemirror-model": "*"
}
},
+ "@types/prosemirror-schema-list": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@types/prosemirror-schema-list/-/prosemirror-schema-list-1.0.1.tgz",
+ "integrity": "sha512-+iUYq+pj2wVHSThj0MjNDzkkGwq8aDQ6j0UJK8a0cNCL8v44Ftcx1noGPtBIEUJgitH960VnfBNoTWfQoQZfRA==",
+ "requires": {
+ "@types/orderedmap": "*",
+ "@types/prosemirror-model": "*",
+ "@types/prosemirror-state": "*"
+ }
+ },
"@types/prosemirror-state": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@types/prosemirror-state/-/prosemirror-state-1.2.1.tgz",
diff --git a/package.json b/package.json
index abde11de0..18d82b9b1 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"webpack-hot-middleware": "^2.24.3"
},
"dependencies": {
+ "@fortawesome/fontawesome-free-solid": "^5.0.13",
"@fortawesome/fontawesome-svg-core": "^1.2.15",
"@fortawesome/free-solid-svg-icons": "^5.7.2",
"@fortawesome/react-fontawesome": "^0.1.4",
@@ -55,6 +56,7 @@
"@types/prosemirror-keymap": "^1.0.1",
"@types/prosemirror-model": "^1.7.0",
"@types/prosemirror-schema-basic": "^1.0.1",
+ "@types/prosemirror-schema-list": "^1.0.1",
"@types/prosemirror-state": "^1.2.1",
"@types/prosemirror-transform": "^1.1.0",
"@types/prosemirror-view": "^1.3.0",
@@ -100,6 +102,7 @@
"prosemirror-keymap": "^1.0.1",
"prosemirror-model": "^1.7.0",
"prosemirror-schema-basic": "^1.0.0",
+ "prosemirror-schema-list": "^1.0.2",
"prosemirror-state": "^1.2.2",
"prosemirror-transform": "^1.1.3",
"prosemirror-view": "^1.7.1",
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
new file mode 100644
index 000000000..abf448c9f
--- /dev/null
+++ b/src/client/util/RichTextSchema.tsx
@@ -0,0 +1,223 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray } from "prosemirror-model"
+import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands'
+import { redo, undo } from 'prosemirror-history'
+import { orderedList, bulletList, listItem } from 'prosemirror-schema-list'
+
+const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"],
+ preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]
+
+// :: Object
+// [Specs](#model.NodeSpec) for the nodes defined in this schema.
+export const nodes: { [index: string]: NodeSpec } = {
+ // :: NodeSpec The top level document node.
+ doc: {
+ content: "block+"
+ },
+
+ // :: NodeSpec A plain paragraph textblock. Represented in the DOM
+ // as a `<p>` element.
+ paragraph: {
+ content: "inline*",
+ group: "block",
+ parseDOM: [{ tag: "p" }],
+ toDOM() { return pDOM }
+ },
+
+ // :: NodeSpec A blockquote (`<blockquote>`) wrapping one or more blocks.
+ blockquote: {
+ content: "block+",
+ group: "block",
+ defining: true,
+ parseDOM: [{ tag: "blockquote" }],
+ toDOM() { return blockquoteDOM }
+ },
+
+ // :: NodeSpec A horizontal rule (`<hr>`).
+ horizontal_rule: {
+ group: "block",
+ parseDOM: [{ tag: "hr" }],
+ toDOM() { return hrDOM }
+ },
+
+ // :: NodeSpec A heading textblock, with a `level` attribute that
+ // should hold the number 1 to 6. Parsed and serialized as `<h1>` to
+ // `<h6>` elements.
+ heading: {
+ attrs: { level: { default: 1 } },
+ content: "inline*",
+ group: "block",
+ defining: true,
+ parseDOM: [{ tag: "h1", attrs: { level: 1 } },
+ { tag: "h2", attrs: { level: 2 } },
+ { tag: "h3", attrs: { level: 3 } },
+ { tag: "h4", attrs: { level: 4 } },
+ { tag: "h5", attrs: { level: 5 } },
+ { tag: "h6", attrs: { level: 6 } }],
+ toDOM(node: any) { return ["h" + node.attrs.level, 0] }
+ },
+
+ // :: NodeSpec A code listing. Disallows marks or non-text inline
+ // nodes by default. Represented as a `<pre>` element with a
+ // `<code>` element inside of it.
+ code_block: {
+ content: "text*",
+ marks: "",
+ group: "block",
+ code: true,
+ defining: true,
+ parseDOM: [{ tag: "pre", preserveWhitespace: "full" }],
+ toDOM() { return preDOM }
+ },
+
+ // :: NodeSpec The text node.
+ text: {
+ group: "inline"
+ },
+
+ // :: NodeSpec An inline image (`<img>`) node. Supports `src`,
+ // `alt`, and `href` attributes. The latter two default to the empty
+ // string.
+ image: {
+ inline: true,
+ attrs: {
+ src: {},
+ alt: { default: null },
+ title: { default: null }
+ },
+ group: "inline",
+ draggable: true,
+ parseDOM: [{
+ tag: "img[src]", getAttrs(dom: any) {
+ return {
+ src: dom.getAttribute("src"),
+ title: dom.getAttribute("title"),
+ alt: dom.getAttribute("alt")
+ }
+ }
+ }],
+ toDOM(node: any) { return ["img", node.attrs] }
+ },
+
+ // :: NodeSpec A hard line break, represented in the DOM as `<br>`.
+ hard_break: {
+ inline: true,
+ group: "inline",
+ selectable: false,
+ parseDOM: [{ tag: "br" }],
+ toDOM() { return brDOM }
+ },
+
+ ordered_list: {
+ ...orderedList,
+ content: 'list_item+',
+ group: 'block'
+ },
+ bullet_list: {
+ content: 'list_item+',
+ group: 'block',
+ parseDOM: [{ tag: "ul" }, { style: "list-style-type=disc;" }],
+ toDOM() { return ulDOM }
+ },
+ list_item: {
+ ...listItem,
+ content: 'paragraph block*'
+ }
+}
+
+const emDOM: DOMOutputSpecArray = ["em", 0];
+const strongDOM: DOMOutputSpecArray = ["strong", 0];
+const codeDOM: DOMOutputSpecArray = ["code", 0];
+const underlineDOM: DOMOutputSpecArray = ["underline", 0];
+
+// :: Object [Specs](#model.MarkSpec) for the marks in the schema.
+export const marks: { [index: string]: MarkSpec } = {
+ // :: MarkSpec A link. Has `href` and `title` attributes. `title`
+ // defaults to the empty string. Rendered and parsed as an `<a>`
+ // element.
+ link: {
+ attrs: {
+ href: {},
+ title: { default: null }
+ },
+ inclusive: false,
+ parseDOM: [{
+ tag: "a[href]", getAttrs(dom: any) {
+ return { href: dom.getAttribute("href"), title: dom.getAttribute("title") }
+ }
+ }],
+ toDOM(node: any) { return ["a", node.attrs, 0] }
+ },
+
+ // :: MarkSpec An emphasis mark. Rendered as an `<em>` element.
+ // Has parse rules that also match `<i>` and `font-style: italic`.
+ em: {
+ parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }],
+ toDOM() { return emDOM }
+ },
+
+ // :: MarkSpec A strong mark. Rendered as `<strong>`, parse rules
+ // also match `<b>` and `font-weight: bold`.
+ strong: {
+ parseDOM: [{ tag: "strong" },
+ { tag: "b" },
+ { style: "font-weight" }],
+ toDOM() { return strongDOM }
+ },
+
+ underline: {
+ parseDOM: [
+ { tag: 'u' },
+ { style: 'text-decoration=underline' }
+ ],
+ toDOM: () => ['span', {
+ style: 'text-decoration:underline'
+ }]
+ },
+
+ strikethrough: {
+ parseDOM: [
+ { tag: 'strike' },
+ { style: 'text-decoration=line-through' },
+ { style: 'text-decoration-line=line-through' }
+ ],
+ toDOM: () => ['span', {
+ style: 'text-decoration-line:line-through'
+ }]
+ },
+
+ subscript: {
+ excludes: 'superscript',
+ parseDOM: [
+ { tag: 'sub' },
+ { style: 'vertical-align=sub' }
+ ],
+ toDOM: () => ['sub']
+ },
+
+ superscript: {
+ excludes: 'subscript',
+ parseDOM: [
+ { tag: 'sup' },
+ { style: 'vertical-align=super' }
+ ],
+ toDOM: () => ['sup']
+ },
+
+
+ // :: MarkSpec Code font mark. Represented as a `<code>` element.
+ code: {
+ parseDOM: [{ tag: "code" }],
+ toDOM() { return codeDOM }
+ }
+}
+
+// :: Schema
+// This schema rougly corresponds to the document schema used by
+// [CommonMark](http://commonmark.org/), minus the list elements,
+// which are defined in the [`prosemirror-schema-list`](#schema-list)
+// module.
+//
+// To reuse elements from this schema, extend or read from its
+// `spec.nodes` and `spec.marks` [properties](#model.Schema.spec).
+export const schema = new Schema({ nodes, marks }) \ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
new file mode 100644
index 000000000..fa43f5326
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.scss
@@ -0,0 +1,54 @@
+
+.tooltipMenu {
+ position: absolute;
+ z-index: 20;
+ background: rgb(19, 18, 18);
+ border: 1px solid silver;
+ border-radius: 4px;
+ padding: 2px 10px;
+ margin-bottom: 7px;
+ -webkit-transform: translateX(-50%);
+ transform: translateX(-50%);
+}
+
+.tooltipMenu:before {
+ content: "";
+ height: 0; width: 0;
+ position: absolute;
+ left: 50%;
+ margin-left: -5px;
+ bottom: -6px;
+ border: 5px solid transparent;
+ border-bottom-width: 0;
+ border-top-color: silver;
+ }
+ .tooltipMenu:after {
+ content: "";
+ height: 0; width: 0;
+ position: absolute;
+ left: 50%;
+ margin-left: -5px;
+ bottom: -4.5px;
+ border: 5px solid transparent;
+ border-bottom-width: 0;
+ border-top-color: black;
+ }
+
+ .menuicon {
+ display: inline-block;
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+ //color: rgb(19, 18, 18);
+ color: white;
+ line-height: 1;
+ padding: 0px 2px;
+ margin: 1px;
+ cursor: pointer;
+ text-align: center;
+ min-width: 10px;
+ }
+ .strong, .heading { font-weight: bold; }
+ .em { font-style: italic; }
+ .underline {text-decoration: underline}
+ .superscript {vertical-align:super}
+ .subscript { vertical-align:sub }
+ .strikethrough {text-decoration-line:line-through} \ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
new file mode 100644
index 000000000..3b87fe9de
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -0,0 +1,125 @@
+import { action, IReactionDisposer, reaction } from "mobx";
+import { baseKeymap } from "prosemirror-commands";
+import { history, redo, undo } from "prosemirror-history";
+import { keymap } from "prosemirror-keymap";
+const { exampleSetup } = require("prosemirror-example-setup")
+import { EditorState, Transaction, } from "prosemirror-state";
+import { EditorView } from "prosemirror-view";
+import { schema } from "./RichTextSchema";
+import React = require("react")
+import "./TooltipTextMenu.scss";
+const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { wrapInList, bulletList } from 'prosemirror-schema-list'
+import {
+ faListUl,
+} from '@fortawesome/free-solid-svg-icons';
+
+
+
+export class TooltipTextMenu {
+
+ private tooltip: HTMLElement;
+
+ constructor(view: EditorView) {
+ this.tooltip = document.createElement("div");
+ this.tooltip.className = "tooltipMenu";
+
+ //add the div which is the tooltip
+ view.dom.parentNode!.appendChild(this.tooltip);
+
+ //add additional icons
+ library.add(faListUl);
+
+ //add the buttons to the tooltip
+ let items = [
+ { command: toggleMark(schema.marks.strong), dom: this.icon("B", "strong") },
+ { command: toggleMark(schema.marks.em), dom: this.icon("i", "em") },
+ { command: toggleMark(schema.marks.underline), dom: this.icon("U", "underline") },
+ { command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough") },
+ { command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") },
+ { command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") },
+ { command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }
+ ]
+ items.forEach(({ dom }) => this.tooltip.appendChild(dom));
+
+ //pointer down handler to activate button effects
+ this.tooltip.addEventListener("pointerdown", e => {
+ e.preventDefault();
+ view.focus();
+ items.forEach(({ command, dom }) => {
+ if (dom.contains(e.srcElement)) {
+ command(view.state, view.dispatch, view)
+ }
+ })
+ })
+
+ this.update(view, undefined);
+ }
+
+ // Helper function to create menu icons
+ icon(text: string, name: string) {
+ let span = document.createElement("span");
+ span.className = "menuicon " + name;
+ span.title = name;
+ span.textContent = text;
+ return span;
+ }
+
+ blockActive(view: EditorView) {
+ const { $from, to } = view.state.selection
+
+ return to <= $from.end() && $from.parent.hasMarkup(schema.nodes.bulletList);
+ }
+
+ //this doesn't currently work but hopefully will soon
+ unorderedListIcon(): HTMLSpanElement {
+ let span = document.createElement("span");
+ let icon = document.createElement("FontAwesomeIcon");
+ icon.className = "menuicon fa fa-smile-o";
+ span.appendChild(icon);
+ return span;
+ }
+
+ // Create an icon for a heading at the given level
+ heading(level: number) {
+ return {
+ command: setBlockType(schema.nodes.heading, { level }),
+ dom: this.icon("H" + level, "heading")
+ }
+ }
+
+ //updates the tooltip menu when the selection changes
+ update(view: EditorView, lastState: EditorState | undefined) {
+ let state = view.state
+ // Don't do anything if the document/selection didn't change
+ if (lastState && lastState.doc.eq(state.doc) &&
+ lastState.selection.eq(state.selection)) return
+
+ // Hide the tooltip if the selection is empty
+ if (state.selection.empty) {
+ this.tooltip.style.display = "none"
+ return
+ }
+
+ // Otherwise, reposition it and update its content
+ this.tooltip.style.display = ""
+ let { from, to } = state.selection
+ // These are in screen coordinates
+ //check this - tranform
+ let start = view.coordsAtPos(from), end = view.coordsAtPos(to)
+ // The box in which the tooltip is positioned, to use as base
+ let box = this.tooltip.offsetParent!.getBoundingClientRect()
+ // Find a center-ish x position from the selection endpoints (when
+ // crossing lines, end may be more to the left)
+ let left = Math.max((start.left + end.left) / 2, start.left + 3)
+ this.tooltip.style.left = (left - box.left) + "px"
+ let width = Math.abs(start.left - end.left) / 2;
+ let mid = Math.min(start.left, end.left) + width;
+ //THIS WIDTH IS 15 * NUMBER OF ICONS + 15
+ this.tooltip.style.width = 120 + "px";
+ this.tooltip.style.bottom = (box.bottom - start.top) + "px";
+ }
+
+ destroy() { this.tooltip.remove() }
+} \ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 8e2ebd690..ab913897b 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,7 +1,7 @@
.documentView-node {
position: absolute;
background: #cdcdcd;
- overflow: hidden;
+ //overflow: hidden;
&.minimized {
width: 30px;
height: 30px;
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 21bd43b6e..cddbef6be 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -17,4 +17,18 @@
overflow-x: hidden;
color: initial;
height: 100%;
-} \ No newline at end of file
+}
+
+.menuicon {
+ display: inline-block;
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+ color: #888;
+ line-height: 1;
+ padding: 0 7px;
+ margin: 1px;
+ cursor: pointer;
+ text-align: center;
+ min-width: 1.4em;
+ }
+ .strong, .heading { font-weight: bold; }
+ .em { font-style: italic; } \ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 04eb2052d..a6cee9957 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -2,7 +2,7 @@ import { action, IReactionDisposer, reaction } from "mobx";
import { baseKeymap } from "prosemirror-commands";
import { history, redo, undo } from "prosemirror-history";
import { keymap } from "prosemirror-keymap";
-import { schema } from "prosemirror-schema-basic";
+import { schema } from "../../util/RichTextSchema";
import { EditorState, Transaction, } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { Opt, FieldWaiting } from "../../../fields/Field";
@@ -10,6 +10,9 @@ import "./FormattedTextBox.scss";
import React = require("react")
import { RichTextField } from "../../../fields/RichTextField";
import { FieldViewProps, FieldView } from "./FieldView";
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { TooltipTextMenu } from "../../util/TooltipTextMenu"
import { ContextMenu } from "../../views/ContextMenu";
@@ -61,6 +64,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
history(),
keymap({ "Mod-z": undo, "Mod-y": redo }),
keymap(baseKeymap),
+ this.tooltipMenuPlugin()
]
};
@@ -139,6 +143,14 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
e.stopPropagation();
}
+ tooltipMenuPlugin() {
+ return new Plugin({
+ view(_editorView) {
+ return new TooltipTextMenu(_editorView)
+ }
+ })
+ }
+
render() {
return (<div className="formattedTextBox-cont"
onPointerDown={this.onPointerDown}
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 22:56:33 +0000