@0m0g1/griot 0.1.14 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/editor/FormatToolbar.js +2 -0
  3. package/src/inline/InlineLexer.js +9 -1
  4. package/src/inline/InlineRenderer.js +14 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@0m0g1/griot",
3
- "version": "0.1.14",
3
+ "version": "0.1.15",
4
4
  "description": "A self-contained block-based rich text editor and renderer built for historical document authoring.",
5
5
  "type": "module",
6
6
  "main": "./src/Griot.js",
package/src/editor/FormatToolbar.js CHANGED
@@ -17,6 +17,8 @@ const FORMATS = [
17
17
  { key: 'italic', label: 'I', title: 'Italic (Ctrl+I)', syntax: '*' },
18
18
  { key: 'underline', label: 'U', title: 'Underline (Ctrl+U)', syntax: '__' },
19
19
  { key: 'strike', label: 'S̶', title: 'Strikethrough', syntax: '~~' },
20
+ { key: 'sup', label: 'x²', title: 'Superscript', syntax: '^' },
21
+ { key: 'sub', label: 'x₂', title: 'Subscript', syntax: '~' },
20
22
  { key: 'code', label: '`', title: 'Inline Code', syntax: '`' },
21
23
  { key: 'highlight', label: '▐', title: 'Highlight', syntax: '==' },
22
24
  { key: 'link', label: '🔗', title: 'Link', action: 'link' },
package/src/inline/InlineLexer.js CHANGED
@@ -7,6 +7,8 @@
7
7
  // *italic* → TOKEN.ITALIC { text }
8
8
  // __underline__ → TOKEN.UNDERLINE { text }
9
9
  // ~~strikethrough~~ → TOKEN.STRIKE { text }
10
+ // ^superscript^ → TOKEN.SUPER { text }
11
+ // ~subscript~ → TOKEN.SUB { text }
10
12
  // `inline code` → TOKEN.CODE { code }
11
13
  // ==highlight== → TOKEN.HIGHLIGHT { text }
12
14
  // {#f00:red text} {blue:text} → TOKEN.COLOR_MARK { color, text }
@@ -25,6 +27,8 @@ export const TOKEN = Object.freeze({
25
27
  ITALIC: 'italic',
26
28
  UNDERLINE: 'underline',
27
29
  STRIKE: 'strike',
30
+ SUPER: 'super',
31
+ SUB: 'sub',
28
32
  CODE: 'code',
29
33
  LINK: 'link',
30
34
  IMAGE: 'image',
@@ -45,8 +49,12 @@ const RULES = [
45
49
  { type: TOKEN.ITALIC, re: /^\*((?:[^*])+)\*/, build: m => ({ text: m[1] }) },
46
50
  // Underline __text__
47
51
  { type: TOKEN.UNDERLINE, re: /^__((?:[^_])+)__/, build: m => ({ text: m[1] }) },
48
- // Strikethrough ~~text~~
52
+ // Strikethrough ~~text~~ (must come before single ~ subscript)
49
53
  { type: TOKEN.STRIKE, re: /^~~((?:[^~])+)~~/, build: m => ({ text: m[1] }) },
54
+ // Subscript ~text~
55
+ { type: TOKEN.SUB, re: /^~((?:[^~])+)~/, build: m => ({ text: m[1] }) },
56
+ // Superscript ^text^
57
+ { type: TOKEN.SUPER, re: /^\^((?:[^^])+)\^/, build: m => ({ text: m[1] }) },
50
58
  // Highlight ==text==
51
59
  { type: TOKEN.HIGHLIGHT, re: /^==((?:[^=])+)==/, build: m => ({ text: m[1] }) },
52
60
  // Colour mark {#hex:text} or {colorname:text}
package/src/inline/InlineRenderer.js CHANGED
@@ -45,6 +45,18 @@ function _toNode(t, opts) {
45
45
  el.textContent = t.text;
46
46
  return el;
47
47
  }
48
+ case TOKEN.SUPER: {
49
+ const el = document.createElement('sup');
50
+ el.className = 'griot-sup';
51
+ el.textContent = t.text;
52
+ return el;
53
+ }
54
+ case TOKEN.SUB: {
55
+ const el = document.createElement('sub');
56
+ el.className = 'griot-sub';
57
+ el.textContent = t.text;
58
+ return el;
59
+ }
48
60
  case TOKEN.HIGHLIGHT: {
49
61
  const el = document.createElement('mark');
50
62
  el.className = 'griot-highlight';
@@ -119,6 +131,8 @@ function _toHTML(t) {
119
131
  case TOKEN.ITALIC: return `<em>${escHtml(t.text)}</em>`;
120
132
  case TOKEN.UNDERLINE: return `<u class="griot-underline">${escHtml(t.text)}</u>`;
121
133
  case TOKEN.STRIKE: return `<s class="griot-strike">${escHtml(t.text)}</s>`;
134
+ case TOKEN.SUPER: return `<sup class="griot-sup">${escHtml(t.text)}</sup>`;
135
+ case TOKEN.SUB: return `<sub class="griot-sub">${escHtml(t.text)}</sub>`;
122
136
  case TOKEN.HIGHLIGHT: return `<mark class="griot-highlight">${escHtml(t.text)}</mark>`;
123
137
  case TOKEN.COLOR_MARK: return `<span class="griot-color-mark" style="color:${escAttr(t.color)}">${escHtml(t.text)}</span>`;
124
138
  case TOKEN.CODE: return `<code class="griot-inline-code">${escHtml(t.code)}</code>`;