fixed text footnotes to not overflow over the left edge of the box. updated a few markdown command syntaxes.

2 files changed, 18 insertions, 22 deletions

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.scss b/src/client/views/nodes/formattedText/FormattedTextBox.scss
index eb9dd1e66..b5a3c5d84 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.scss
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.scss
@@ -225,16 +225,15 @@ audiotag:hover {
 }
 
 footnote {
-    display: inline-block;
+    display: inline-flex;
+    top: -0.5em;
     position: relative;
     cursor: pointer;
-
-    div {
-        padding: 0 !important;
-    }
+    height: 1em;
+    width: 0.5em;
 }
 
-footnote::after {
+footnote::before {
     content: counter(prosemirror-footnote);
     vertical-align: super;
     font-size: 75%;
@@ -248,15 +247,14 @@ footnote::after {
 .footnote-tooltip {
     cursor: auto;
     font-size: 75%;
-    position: absolute;
-    left: -30px;
-    top: calc(100% + 10px);
+    position: relative;
     background: silver;
-    padding: 3px;
     border-radius: 2px;
-    max-width: 100px;
-    min-width: 50px;
-    width: max-content;
+    min-width: 100px;
+    top: 2em;
+    height: max-content;
+    left: -1em;
+    padding: 3px;
 }
 
 .prosemirror-attribution {
@@ -271,8 +269,7 @@ footnote::after {
     border-left-color: transparent;
     border-right-color: transparent;
     position: absolute;
-    top: -5px;
-    left: 27px;
+    top: -0.5em;
     content: ' ';
     height: 0;
     width: 0;
@@ -766,8 +763,8 @@ footnote::after {
         cursor: auto;
         font-size: 75%;
         position: absolute;
-        left: -30px;
-        top: calc(100% + 10px);
+        // left: -30px;
+        // top: calc(100% + 10px);
         background: silver;
         padding: 3px;
         border-radius: 2px;
@@ -788,8 +785,7 @@ footnote::after {
         border-left-color: transparent;
         border-right-color: transparent;
         position: absolute;
-        top: -5px;
-        left: 27px;
+        top: -0.5em;
         content: ' ';
         height: 0;
         width: 0;
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index 0ca6b415f..23e776738 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -28,7 +28,7 @@ export class RichTextRules {
             emDash,
 
             // > blockquote
-            wrappingInputRule(/^\s*>\s$/, schema.nodes.blockquote),
+            wrappingInputRule(/%>\s$/, schema.nodes.blockquote),
 
             // 1. create numerical ordered list
             wrappingInputRule(
@@ -229,7 +229,7 @@ export class RichTextRules {
             }),
 
             // stop using active style
-            new InputRule(new RegExp(/#alt$/), (state, match, start, end) => {
+            new InputRule(new RegExp(/%alt$/), (state, match, start, end) => {
                 setTimeout(() => (this.Document[this.TextBox.props.fieldKey + '-usePath'] = this.Document[this.TextBox.props.fieldKey + '-usePath'] ? undefined : 'alternate'));
                 return state.tr.deleteRange(start, end);
             }),
@@ -302,7 +302,7 @@ export class RichTextRules {
 
             // create an inline equation node
             // eq:<equation>>
-            new InputRule(new RegExp(/:eq([a-zA-Z-0-9\(\)]*)$/), (state, match, start, end) => {
+            new InputRule(new RegExp(/%eq([a-zA-Z-0-9\(\)]*)$/), (state, match, start, end) => {
                 const fieldKey = 'math' + Utils.GenerateGuid();
                 this.TextBox.dataDoc[fieldKey] = match[1];
                 const tr = state.tr.setSelection(new TextSelection(state.tr.doc.resolve(end - 3), state.tr.doc.resolve(end))).replaceSelectionWith(schema.nodes.equation.create({ fieldKey }));