added style shortcut for text

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";