diff options
| -rw-r--r-- | src/client/util/RichTextRules.ts | 22 | ||||
| -rw-r--r-- | src/client/util/RichTextSchema.tsx | 3 | ||||
| -rw-r--r-- | src/client/util/TooltipTextMenu.tsx | 31 |
3 files changed, 53 insertions, 3 deletions
diff --git a/src/client/util/RichTextRules.ts b/src/client/util/RichTextRules.ts index cef1011cc..4e3192dd4 100644 --- a/src/client/util/RichTextRules.ts +++ b/src/client/util/RichTextRules.ts @@ -5,6 +5,7 @@ import { NodeSelection, TextSelection } from "prosemirror-state"; import { NumCast, Cast } from "../../new_fields/Types"; import { Doc } from "../../new_fields/Doc"; import { FormattedTextBox } from "../views/nodes/FormattedTextBox"; +import { TooltipTextMenuManager } from "../util/TooltipTextMenu"; import { Docs } from "../documents/Documents"; import { Id } from "../../new_fields/FieldSymbols"; @@ -72,6 +73,27 @@ export const inpRules = { return state.tr.deleteRange(start, end).addStoredMark(schema.marks.pFontSize.create({ fontSize: size })); }), new InputRule( + new RegExp(/%[a-z]*\s$/), + (state, match, start, end) => { + const color = match[0].substring(1, match[0].length - 1); + let marks = TooltipTextMenuManager.Instance._brushMap.get(color); + if (marks) { + let tr = state.tr.deleteRange(start, end); + return marks ? Array.from(marks).reduce((tr, m) => tr.addStoredMark(m), tr) : tr; + } + if (color) { + return state.tr.deleteRange(start, end).addStoredMark(schema.marks.pFontColor.create({ color: color })); + } + return state.tr.deleteRange(start, end); + }), + new InputRule( + new RegExp(/%%$/), + (state, match, start, end) => { + let tr = state.tr.deleteRange(start, end); + let marks = state.tr.selection.$anchor.nodeBefore?.marks; + return marks ? Array.from(marks).filter(m => m !== state.schema.marks.user_mark).reduce((tr, m) => tr.removeStoredMark(m), tr) : tr; + }), + new InputRule( new RegExp(/t$/), (state, match, start, end) => { if (state.selection.to === state.selection.from) return null; diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx index 189bf08f7..5fcf15cb7 100644 --- a/src/client/util/RichTextSchema.tsx +++ b/src/client/util/RichTextSchema.tsx @@ -324,8 +324,9 @@ export const marks: { [index: string]: MarkSpec } = { } }, + // :: MarkSpec Coloring on text. Has `color` attribute that defined the color of the marked text. - color: { + pFontColor: { attrs: { color: { default: "#000" } }, diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index 35a099c48..89037dcb2 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -20,6 +20,7 @@ import { updateBullets } from './ProsemirrorExampleTransfer'; import { DocumentDecorations } from '../views/DocumentDecorations'; import { SelectionManager } from './SelectionManager'; import { PastelSchemaPalette, DarkPastelSchemaPalette } from '../../new_fields/SchemaHeaderField'; +import { Keys } from "../views/search/FilterBox"; const { toggleMark, setBlockType } = require("prosemirror-commands"); const { openPrompt, TextField } = require("./ProsemirrorCopy/prompt.js"); @@ -840,7 +841,7 @@ export class TooltipTextMenu { public static insertColor(color: String, state: EditorState<any>, dispatch: any) { if (state.selection.empty) return false; - const colorMark = state.schema.mark(state.schema.marks.color, { color: color }); + const colorMark = state.schema.mark(state.schema.marks.pFontColor, { color: color }); dispatch(state.tr.addMark(state.selection.from, state.selection.to, colorMark)); } @@ -998,6 +999,7 @@ export class TooltipTextMenu { }); const self = this; + const input = document.createElement("input"); const clearBrush = new MenuItem({ title: "Clear brush", execEvent: "", @@ -1007,7 +1009,31 @@ export class TooltipTextMenu { const button = document.createElement("button"); button.textContent = "Clear brush"; + input.textContent = "editme"; + input.style.width = "75px"; + input.style.height = "30px"; + input.style.background = "white"; + input.setAttribute("contenteditable", "true"); + input.style.whiteSpace = "nowrap"; + input.type = "text"; + input.placeholder = "Enter URL"; + input.onpointerdown = (e: PointerEvent) => { + e.stopPropagation(); + e.preventDefault(); + }; + input.onclick = (e: MouseEvent) => { + input.select(); + input.focus(); + }; + input.onkeypress = (e: KeyboardEvent) => { + if (e.key === "Enter") { + TooltipTextMenuManager.Instance._brushMarks && TooltipTextMenuManager.Instance._brushMap.set(input.value, TooltipTextMenuManager.Instance._brushMarks); + input.style.background = "lightGray"; + } + } + const wrapper = document.createElement("div"); + wrapper.appendChild(input); wrapper.appendChild(button); return wrapper; }, @@ -1488,7 +1514,7 @@ export class TooltipTextMenu { } -class TooltipTextMenuManager { +export class TooltipTextMenuManager { private static _instance: TooltipTextMenuManager; public pinnedX: number = 0; @@ -1498,6 +1524,7 @@ class TooltipTextMenuManager { private _isPinned: boolean = false; public _brushMarks: Set<Mark> | undefined; + public _brushMap: Map<string, Set<Mark>> = new Map(); public _brushIsEmpty: boolean = true; public color: String = "#000"; |