@internetstiftelsen/styleguide 5.0.17 → 5.0.19

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 (10) hide show
  1. package/dist/atoms/textarea/rich-text.js +58 -10
  2. package/package.json +3 -1
  3. package/src/atoms/icon/heading-3.svg +5 -12
  4. package/src/atoms/icon/richtext-heading-2.svg +8 -0
  5. package/src/atoms/icon/richtext-ordered-list.svg +6 -5
  6. package/src/atoms/icon/sprite.svg +10 -10
  7. package/src/atoms/textarea/rich-text.js +53 -9
  8. package/src/configurations/icons.json +1 -1
  9. package/src/configurations/typography/_typography.scss +0 -9
  10. package/src/atoms/icon/heading-2.svg +0 -15
package/dist/atoms/textarea/rich-text.js CHANGED
@@ -24,6 +24,14 @@ var _extensionBulletList = require('@tiptap/extension-bullet-list');
24
24
 
25
25
  var _extensionBulletList2 = _interopRequireDefault(_extensionBulletList);
26
26
 
27
+ var _extensionOrderedList = require('@tiptap/extension-ordered-list');
28
+
29
+ var _extensionOrderedList2 = _interopRequireDefault(_extensionOrderedList);
30
+
31
+ var _extensionHeading = require('@tiptap/extension-heading');
32
+
33
+ var _extensionHeading2 = _interopRequireDefault(_extensionHeading);
34
+
27
35
  var _extensionListItem = require('@tiptap/extension-list-item');
28
36
 
29
37
  var _extensionListItem2 = _interopRequireDefault(_extensionListItem);
@@ -62,6 +70,26 @@ function kebabToPascal(str) {
62
70
  return str.replace(/(^\w|-\w)/g, clearAndCapitalize);
63
71
  }
64
72
 
73
+ function insertHeading(button, editor) {
74
+
75
+ var levelAttr = button.dataset.richTextControl;
76
+
77
+ var level = parseInt(levelAttr.replace('heading-', ''), 10);
78
+
79
+ editor.commands.toggleHeading({ level: level });
80
+
81
+ var toolbar = button.parentElement; // The toolbar div
82
+ var headingButtons = toolbar.querySelectorAll('button[data-rich-text-control^="heading-"]');
83
+
84
+ headingButtons.forEach(function (btn) {
85
+ btn.classList.remove('is-active');
86
+ });
87
+
88
+ if (editor.isActive('heading', { level: level })) {
89
+ button.classList.add('is-active');
90
+ }
91
+ }
92
+
65
93
  function insertLink(el, editor) {
66
94
  var addLink = function addLink(e, modal, close) {
67
95
  e.preventDefault();
@@ -126,6 +154,8 @@ function createToolbarButton(el, control, editor) {
126
154
 
127
155
  if (control === 'link') {
128
156
  insertLink(el, editor);
157
+ } else if (control === 'heading-2' || control === 'heading-3') {
158
+ insertHeading(button, editor);
129
159
  } else {
130
160
  var method = 'toggle' + kebabToPascal(control);
131
161
 
@@ -135,17 +165,33 @@ function createToolbarButton(el, control, editor) {
135
165
  }
136
166
 
137
167
  function toogleButtonState(editor, el) {
138
- [].forEach.call(el.parentNode.querySelectorAll('[data-rich-text-control]'), function (control) {
139
- if (editor.isActive(control.value)) {
140
- control.classList.add('is-active');
168
+ var buttons = el.parentNode.querySelectorAll('[data-rich-text-control]');
169
+
170
+ buttons.forEach(function (button) {
171
+ var control = button.getAttribute('data-rich-text-control');
172
+ var value = kebabToCamel(control);
173
+
174
+ // 🧠 Handle heading separately
175
+ if (control === 'heading-2' || control === 'heading-3') {
176
+ var level = parseInt(control.replace('heading-', ''), 10);
177
+ if (editor.isActive('heading', { level: level })) {
178
+ button.classList.add('is-active');
179
+ } else {
180
+ button.classList.remove('is-active');
181
+ }
182
+ return;
183
+ }
184
+
185
+ // 🔠 Handle all others like bold, italic, bullet-list, etc.
186
+ if (editor.isActive(value)) {
187
+ button.classList.add('is-active');
141
188
  } else {
142
- control.classList.remove('is-active');
189
+ button.classList.remove('is-active');
143
190
  }
144
191
 
145
- if (control.value === 'link' && editor.view.state.selection.empty) {
146
- control.disabled = true;
147
- } else if (control.value === 'link') {
148
- control.disabled = false;
192
+ // 🔗 Special logic for link
193
+ if (value === 'link') {
194
+ button.disabled = editor.view.state.selection.empty;
149
195
  }
150
196
  });
151
197
  }
@@ -157,7 +203,7 @@ function createToolbar(el, editor) {
157
203
 
158
204
  el.parentNode.insertBefore(toolbar, el);
159
205
 
160
- ['bold', 'italic', 'link', 'bullet-list'].forEach(function (control) {
206
+ ['heading-2', 'heading-3', 'bold', 'italic', 'link', 'bullet-list', 'ordered-list'].forEach(function (control) {
161
207
  createToolbarButton(toolbar, control, editor);
162
208
  });
163
209
  }
@@ -174,7 +220,9 @@ function setupTextArea(el) {
174
220
  var editorEl = document.createElement('div');
175
221
  var editor = new _core.Editor({
176
222
  element: editorEl,
177
- extensions: [_extensionDocument2.default, _extensionParagraph2.default, _extensionText2.default, _extensionListItem2.default, _extensionBulletList2.default, _extensionBold2.default, _extensionItalic2.default, _extensionLink.Link.configure({
223
+ extensions: [_extensionDocument2.default, _extensionParagraph2.default, _extensionText2.default, _extensionListItem2.default, _extensionBulletList2.default, _extensionOrderedList2.default, _extensionHeading2.default.configure({
224
+ levels: [2, 3]
225
+ }), _extensionBold2.default, _extensionItalic2.default, _extensionLink.Link.configure({
178
226
  openOnClick: false,
179
227
  HTMLAttributes: {
180
228
  class: 'u-link'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@internetstiftelsen/styleguide",
3
- "version": "5.0.17",
3
+ "version": "5.0.19",
4
4
  "main": "dist/components.js",
5
5
  "ports": {
6
6
  "fractal": "3000"
@@ -78,6 +78,8 @@
78
78
  "@tiptap/core": "^2.9.0",
79
79
  "@tiptap/extension-bold": "^2.9.0",
80
80
  "@tiptap/extension-bullet-list": "^2.9.0",
81
+ "@tiptap/extension-ordered-list": "^2.9.0",
82
+ "@tiptap/extension-heading": "^2.9.0",
81
83
  "@tiptap/extension-document": "^2.9.0",
82
84
  "@tiptap/extension-dropcursor": "^2.9.0",
83
85
  "@tiptap/extension-history": "^2.9.0",
package/src/atoms/icon/heading-3.svg CHANGED
@@ -1,15 +1,8 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
2
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
3
- <defs>
4
- <style>
5
- .cls-1 {
6
- fill: none;
7
- }
8
- </style>
9
- </defs>
10
- <g>
11
- <path d="M.02,2.36h1.89v4.05h4.37V2.36h1.89v10.15h-1.89v-4.35H1.91v4.35H.02V2.36Z"/>
12
- <path d="M11.15,12.22c-.57-.28-1.02-.67-1.33-1.18-.32-.5-.47-1.09-.47-1.75l1.8-.11c0,.35.08.65.25.91.17.26.41.46.72.6s.67.21,1.08.21c.6,0,1.07-.13,1.41-.4.33-.27.5-.64.5-1.12,0-.52-.21-.9-.63-1.13-.42-.23-1.04-.34-1.85-.34v-1.42c.59,0,1.06-.11,1.39-.32.34-.21.51-.54.51-.99,0-.38-.13-.68-.38-.9-.25-.22-.59-.33-1.02-.33-.47,0-.84.13-1.11.38-.27.25-.41.59-.42,1.03l-1.78-.12c0-.58.14-1.1.43-1.55.29-.46.69-.82,1.2-1.07.52-.26,1.09-.39,1.74-.39.61,0,1.16.12,1.63.35s.85.56,1.12.98.4.9.4,1.44c0,.46-.11.86-.34,1.2-.23.34-.54.61-.93.8.57.19,1.02.49,1.35.9.34.41.5.91.5,1.51,0,.64-.16,1.2-.48,1.69-.32.49-.76.87-1.34,1.14-.57.27-1.23.41-1.97.41s-1.41-.14-1.98-.42Z"/>
13
- </g>
14
- <rect class="cls-1" width="17" height="15"/>
3
+ <g>
4
+ <path d="M.02,2.36h1.89v4.05h4.37V2.36h1.89v10.15h-1.89v-4.35H1.91v4.35H.02V2.36Z"/>
5
+ <path d="M11.15,12.22c-.57-.28-1.02-.67-1.33-1.18-.32-.5-.47-1.09-.47-1.75l1.8-.11c0,.35.08.65.25.91.17.26.41.46.72.6s.67.21,1.08.21c.6,0,1.07-.13,1.41-.4.33-.27.5-.64.5-1.12,0-.52-.21-.9-.63-1.13-.42-.23-1.04-.34-1.85-.34v-1.42c.59,0,1.06-.11,1.39-.32.34-.21.51-.54.51-.99,0-.38-.13-.68-.38-.9-.25-.22-.59-.33-1.02-.33-.47,0-.84.13-1.11.38-.27.25-.41.59-.42,1.03l-1.78-.12c0-.58.14-1.1.43-1.55.29-.46.69-.82,1.2-1.07.52-.26,1.09-.39,1.74-.39.61,0,1.16.12,1.63.35s.85.56,1.12.98.4.9.4,1.44c0,.46-.11.86-.34,1.2-.23.34-.54.61-.93.8.57.19,1.02.49,1.35.9.34.41.5.91.5,1.51,0,.64-.16,1.2-.48,1.69-.32.49-.76.87-1.34,1.14-.57.27-1.23.41-1.97.41s-1.41-.14-1.98-.42Z"/>
6
+ </g>
7
+ <rect style="fill:none;" width="17" height="15"/>
15
8
  </svg>
package/src/atoms/icon/richtext-heading-2.svg ADDED
@@ -0,0 +1,8 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
3
+ <g>
4
+ <path d="M.07,2.35h1.9v4.09h4.4V2.35h1.9v10.23h-1.9v-4.39H1.97v4.39H.07V2.35Z"/>
5
+ <path d="M10.31,10.88c.82-.59,1.52-1.13,2.12-1.63.6-.5,1.13-1.08,1.59-1.72.46-.65.69-1.3.69-1.96,0-.46-.12-.84-.37-1.13-.25-.29-.61-.43-1.09-.43-.56,0-.98.2-1.25.6-.27.4-.42.9-.44,1.49l-1.79-.14c0-.63.14-1.23.42-1.8.28-.57.69-1.03,1.22-1.39.53-.36,1.16-.53,1.89-.53.62,0,1.18.14,1.66.4s.87.65,1.14,1.14c.27.49.41,1.06.41,1.71,0,1.03-.34,2.01-1.03,2.93-.68.92-1.61,1.74-2.79,2.46h4.22v1.7h-7.06v-1.38l.45-.32Z"/>
6
+ </g>
7
+ <rect style="fill:none;" width="17" height="15"/>
8
+ </svg>
package/src/atoms/icon/richtext-ordered-list.svg CHANGED
@@ -1,7 +1,8 @@
1
1
  <?xml version="1.0" encoding="UTF-8"?>
2
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
3
- <path d="M5.55.75h10.93v2H5.55V.75ZM5.55,5.96h10.93v2H5.55v-2ZM5.55,11.17h10.93v2H5.55v-2Z"/>
4
- <path d="M1.22,1.13H.34v-.6h.49c.13,0,.23-.03.29-.09.06-.06.1-.15.1-.29v-.16h.75v3.48h-.75V1.13Z"/>
5
- <path d="M.18,7.89c.27-.18.5-.36.71-.53.21-.17.39-.36.56-.58s.25-.44.25-.65c0-.13-.03-.24-.1-.32s-.16-.12-.3-.12c-.29,0-.45.21-.48.63l-.74-.06c0-.21.05-.42.15-.62.1-.2.24-.37.43-.49s.41-.19.67-.19c.22,0,.41.05.58.14.17.09.3.23.4.4s.15.37.15.6c0,.32-.09.63-.28.92-.19.29-.46.54-.81.76h1.23v.7H.11v-.55s.05-.04.07-.05Z"/>
6
- <path d="M.64,13.72c-.2-.1-.36-.24-.47-.42-.11-.18-.17-.39-.17-.62l.75-.04c0,.1.02.19.07.27.05.08.12.14.21.18.09.04.2.06.32.06.18,0,.31-.04.41-.11s.15-.18.15-.32c0-.15-.06-.25-.18-.32s-.31-.1-.57-.1v-.59c.18,0,.31-.03.4-.09.09-.06.14-.15.14-.28,0-.11-.03-.19-.1-.25-.07-.06-.16-.09-.28-.09-.14,0-.24.04-.32.11-.08.07-.12.17-.12.29l-.75-.05c0-.2.05-.39.15-.55.1-.16.25-.29.43-.38.18-.09.39-.14.62-.14.21,0,.41.04.57.12.17.08.3.2.39.34s.14.32.14.51c0,.14-.03.27-.09.38-.06.11-.14.21-.25.28.17.07.31.18.4.32.09.14.14.3.14.49,0,.22-.06.42-.17.6-.11.17-.27.31-.47.4-.2.1-.43.14-.7.14s-.5-.05-.7-.15Z"/>
2
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.02 18">
3
+ <path d="M5.52,2.5h12v2.09H5.52v-2.09ZM5.52,7.95h12v2.09H5.52v-2.09ZM5.52,13.41h12v2.09H5.52v-2.09Z"/>
4
+ <rect style="fill:none;" x=".02" width="18" height="18"/>
5
+ <path d="M1.32,2.67H.28v-.58h.63c.14,0,.25-.03.31-.09.07-.06.1-.16.1-.31v-.24h.73v4.09h-.73v-2.88Z"/>
6
+ <path d="M.31,10.39c.33-.23.61-.45.85-.65s.45-.43.63-.69c.19-.26.28-.52.28-.78,0-.19-.05-.34-.15-.45-.1-.11-.24-.17-.44-.17-.22,0-.39.08-.5.24-.11.16-.17.36-.18.6l-.72-.06c0-.25.06-.49.17-.72.11-.23.27-.41.49-.55s.47-.21.76-.21c.25,0,.47.05.66.16.19.11.35.26.46.46.11.2.16.43.16.68,0,.41-.14.8-.41,1.17s-.65.7-1.12.98h1.69v.68H.13v-.55l.18-.13Z"/>
7
+ <path d="M.73,16.49c-.23-.11-.41-.27-.54-.47-.13-.2-.19-.44-.19-.71l.72-.04c0,.14.03.26.1.37s.16.19.29.24c.12.06.27.09.43.09.24,0,.43-.05.57-.16s.2-.26.2-.45c0-.21-.08-.36-.25-.45-.17-.09-.42-.14-.75-.14v-.57c.24,0,.43-.04.56-.13.14-.08.2-.22.2-.4,0-.15-.05-.27-.15-.36-.1-.09-.24-.13-.41-.13-.19,0-.34.05-.45.15-.11.1-.17.24-.17.41l-.72-.05c0-.23.06-.44.17-.63.12-.19.28-.33.49-.43.21-.1.44-.16.7-.16.25,0,.47.05.66.14.19.09.34.23.45.39.11.17.16.36.16.58,0,.18-.05.34-.14.48s-.22.24-.38.32c.23.08.41.2.55.36s.2.37.2.61c0,.26-.06.48-.19.68-.13.2-.31.35-.54.46-.23.11-.49.16-.79.16s-.57-.06-.8-.17Z"/>
7
8
  </svg>
package/src/atoms/icon/sprite.svg CHANGED
@@ -296,15 +296,7 @@
296
296
  <path d="M18.312 13.274h2.49a9.319 9.319 0 0 1-2.593 6.534 10.434 10.434 0 0 1-6.257 3.353V28h-2.9v-4.839a10.445 10.445 0 0 1-6.257-3.353 9.315 9.315 0 0 1-2.597-6.534h2.49c-.054 2.04.793 4 2.316 5.358a7.89 7.89 0 0 0 5.5 2.109 7.89 7.89 0 0 0 5.5-2.109 6.932 6.932 0 0 0 2.316-5.358h-.008zm-7.813 4.425a4.488 4.488 0 0 1-4.425-4.425V4.425a4.248 4.248 0 0 1 1.314-3.111 4.34 4.34 0 0 1 6.221 0 4.255 4.255 0 0 1 1.314 3.111v8.85a4.488 4.488 0 0 1-4.425 4.425l.001-.001z"/>
297
297
  </symbol>
298
298
 
299
- <symbol id="icon-richtext-bold" viewbox="0 0 10 14">
300
- <path d="M.55 13.209h4.844c2.109 0 4.056-1.292 4.056-3.6a3.45 3.45 0 0 0-2-3.041A2.797 2.797 0 0 0 8.83 4.14C8.83 1.653 6.747.791 4.857.791H.55v12.418zm2.232-7.418V2.803h2.111c1.063 0 1.89.492 1.89 1.459 0 1.222-.844 1.529-1.714 1.529H2.782zm0 5.291V7.716h2.559A1.734 1.734 0 0 1 7.25 9.359c0 1.169-.67 1.723-1.821 1.723H2.782z"/>
301
- </symbol>
302
-
303
- <symbol id="icon-richtext-italic" viewbox="0 0 10 14">
304
- <path d="M10.082 2.282v-2H4.364v2h1.508l-3.908 9.436H-.082v2h5.718v-2H4.129l3.908-9.436z"/>
305
- </symbol>
306
-
307
- <symbol id="icon-heading-2" viewbox="0 0 17 15">
299
+ <symbol id="icon-richtext-heading-2" viewbox="0 0 17 15">
308
300
  <g>
309
301
  <path d="M.07,2.35h1.9v4.09h4.4V2.35h1.9v10.23h-1.9v-4.39H1.97v4.39H.07V2.35Z"/>
310
302
  <path d="M10.31,10.88c.82-.59,1.52-1.13,2.12-1.63.6-.5,1.13-1.08,1.59-1.72.46-.65.69-1.3.69-1.96,0-.46-.12-.84-.37-1.13-.25-.29-.61-.43-1.09-.43-.56,0-.98.2-1.25.6-.27.4-.42.9-.44,1.49l-1.79-.14c0-.63.14-1.23.42-1.8.28-.57.69-1.03,1.22-1.39.53-.36,1.16-.53,1.89-.53.62,0,1.18.14,1.66.4s.87.65,1.14,1.14c.27.49.41,1.06.41,1.71,0,1.03-.34,2.01-1.03,2.93-.68.92-1.61,1.74-2.79,2.46h4.22v1.7h-7.06v-1.38l.45-.32Z"/>
@@ -312,7 +304,7 @@
312
304
  <rect style="fill:none;" width="17" height="15"/>
313
305
  </symbol>
314
306
 
315
- <symbol id="icon-heading-3" viewbox="0 0 17 15">
307
+ <symbol id="icon-richtext-heading-3" viewbox="0 0 17 15">
316
308
  <g>
317
309
  <path d="M.02,2.36h1.89v4.05h4.37V2.36h1.89v10.15h-1.89v-4.35H1.91v4.35H.02V2.36Z"/>
318
310
  <path d="M11.15,12.22c-.57-.28-1.02-.67-1.33-1.18-.32-.5-.47-1.09-.47-1.75l1.8-.11c0,.35.08.65.25.91.17.26.41.46.72.6s.67.21,1.08.21c.6,0,1.07-.13,1.41-.4.33-.27.5-.64.5-1.12,0-.52-.21-.9-.63-1.13-.42-.23-1.04-.34-1.85-.34v-1.42c.59,0,1.06-.11,1.39-.32.34-.21.51-.54.51-.99,0-.38-.13-.68-.38-.9-.25-.22-.59-.33-1.02-.33-.47,0-.84.13-1.11.38-.27.25-.41.59-.42,1.03l-1.78-.12c0-.58.14-1.1.43-1.55.29-.46.69-.82,1.2-1.07.52-.26,1.09-.39,1.74-.39.61,0,1.16.12,1.63.35s.85.56,1.12.98.4.9.4,1.44c0,.46-.11.86-.34,1.2-.23.34-.54.61-.93.8.57.19,1.02.49,1.35.9.34.41.5.91.5,1.51,0,.64-.16,1.2-.48,1.69-.32.49-.76.87-1.34,1.14-.57.27-1.23.41-1.97.41s-1.41-.14-1.98-.42Z"/>
@@ -320,6 +312,14 @@
320
312
  <rect style="fill:none;" width="17" height="15"/>
321
313
  </symbol>
322
314
 
315
+ <symbol id="icon-richtext-bold" viewbox="0 0 10 14">
316
+ <path d="M.55 13.209h4.844c2.109 0 4.056-1.292 4.056-3.6a3.45 3.45 0 0 0-2-3.041A2.797 2.797 0 0 0 8.83 4.14C8.83 1.653 6.747.791 4.857.791H.55v12.418zm2.232-7.418V2.803h2.111c1.063 0 1.89.492 1.89 1.459 0 1.222-.844 1.529-1.714 1.529H2.782zm0 5.291V7.716h2.559A1.734 1.734 0 0 1 7.25 9.359c0 1.169-.67 1.723-1.821 1.723H2.782z"/>
317
+ </symbol>
318
+
319
+ <symbol id="icon-richtext-italic" viewbox="0 0 10 14">
320
+ <path d="M10.082 2.282v-2H4.364v2h1.508l-3.908 9.436H-.082v2h5.718v-2H4.129l3.908-9.436z"/>
321
+ </symbol>
322
+
323
323
  <symbol id="icon-richtext-bullet-list" viewbox="0 0 17 15">
324
324
  <circle cx="1.86" cy="2.291" r="1.86"/>
325
325
  <circle cx="1.86" cy="7.5" r="1.86"/>
package/src/atoms/textarea/rich-text.js CHANGED
@@ -3,6 +3,8 @@ import Document from '@tiptap/extension-document';
3
3
  import Paragraph from '@tiptap/extension-paragraph';
4
4
  import Text from '@tiptap/extension-text';
5
5
  import BulletList from '@tiptap/extension-bullet-list';
6
+ import OrderedList from '@tiptap/extension-ordered-list';
7
+ import Heading from '@tiptap/extension-heading'
6
8
  import ListItem from '@tiptap/extension-list-item';
7
9
  import Bold from '@tiptap/extension-bold';
8
10
  import Italic from '@tiptap/extension-italic';
@@ -23,6 +25,26 @@ function kebabToPascal(str) {
23
25
  return str.replace(/(^\w|-\w)/g, clearAndCapitalize);
24
26
  }
25
27
 
28
+ function insertHeading(button, editor) {
29
+
30
+ const levelAttr = button.dataset.richTextControl;
31
+
32
+ const level = parseInt(levelAttr.replace('heading-', ''), 10);
33
+
34
+ editor.commands.toggleHeading({ level });
35
+
36
+ const toolbar = button.parentElement; // The toolbar div
37
+ const headingButtons = toolbar.querySelectorAll('button[data-rich-text-control^="heading-"]');
38
+
39
+ headingButtons.forEach(btn => {
40
+ btn.classList.remove('is-active');
41
+ });
42
+
43
+ if (editor.isActive('heading', { level })) {
44
+ button.classList.add('is-active');
45
+ }
46
+ }
47
+
26
48
  function insertLink(el, editor) {
27
49
  const addLink = (e, modal, close) => {
28
50
  e.preventDefault();
@@ -97,6 +119,8 @@ function createToolbarButton(el, control, editor) {
97
119
 
98
120
  if (control === 'link') {
99
121
  insertLink(el, editor);
122
+ } else if(control === 'heading-2' || control === 'heading-3') {
123
+ insertHeading(button, editor);
100
124
  } else {
101
125
  const method = `toggle${kebabToPascal(control)}`;
102
126
 
@@ -108,17 +132,33 @@ function createToolbarButton(el, control, editor) {
108
132
  }
109
133
 
110
134
  function toogleButtonState(editor, el) {
111
- [].forEach.call(el.parentNode.querySelectorAll('[data-rich-text-control]'), (control) => {
112
- if (editor.isActive(control.value)) {
113
- control.classList.add('is-active');
135
+ const buttons = el.parentNode.querySelectorAll('[data-rich-text-control]');
136
+
137
+ buttons.forEach((button) => {
138
+ const control = button.getAttribute('data-rich-text-control');
139
+ const value = kebabToCamel(control);
140
+
141
+ // 🧠 Handle heading separately
142
+ if (control === 'heading-2' || control === 'heading-3') {
143
+ const level = parseInt(control.replace('heading-', ''), 10);
144
+ if (editor.isActive('heading', { level })) {
145
+ button.classList.add('is-active');
146
+ } else {
147
+ button.classList.remove('is-active');
148
+ }
149
+ return;
150
+ }
151
+
152
+ // 🔠 Handle all others like bold, italic, bullet-list, etc.
153
+ if (editor.isActive(value)) {
154
+ button.classList.add('is-active');
114
155
  } else {
115
- control.classList.remove('is-active');
156
+ button.classList.remove('is-active');
116
157
  }
117
158
 
118
- if (control.value === 'link' && editor.view.state.selection.empty) {
119
- control.disabled = true;
120
- } else if (control.value === 'link') {
121
- control.disabled = false;
159
+ // 🔗 Special logic for link
160
+ if (value === 'link') {
161
+ button.disabled = editor.view.state.selection.empty;
122
162
  }
123
163
  });
124
164
  }
@@ -130,7 +170,7 @@ function createToolbar(el, editor) {
130
170
 
131
171
  el.parentNode.insertBefore(toolbar, el);
132
172
 
133
- ['bold', 'italic', 'link', 'bullet-list'].forEach((control) => {
173
+ ['heading-2', 'heading-3', 'bold', 'italic', 'link', 'bullet-list', 'ordered-list'].forEach((control) => {
134
174
  createToolbarButton(toolbar, control, editor);
135
175
  });
136
176
  }
@@ -153,6 +193,10 @@ export function setupTextArea(el, onChange = () => {}) {
153
193
  Text,
154
194
  ListItem,
155
195
  BulletList,
196
+ OrderedList,
197
+ Heading.configure({
198
+ levels: [2, 3],
199
+ }),
156
200
  Bold,
157
201
  Italic,
158
202
  Link.configure({
package/src/configurations/icons.json CHANGED
@@ -1 +1 @@
1
- [{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"heading-2","name":"Heading 2"},{"id":"heading-3","name":"Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
1
+ [{"id":"search","name":"Search"},{"id":"search-domain","name":"Search Domain"},{"id":"arrow-forwards","name":"Arrow Forwards"},{"id":"arrow-backwards","name":"Arrow Backwards"},{"id":"arrow-down","name":"Arrow Down"},{"id":"arrow-variant","name":"Arrow Variant"},{"id":"hamburger","name":"Hamburger"},{"id":"close","name":"Close"},{"id":"check","name":"Check"},{"id":"quote","name":"Quote"},{"id":"file","name":"File"},{"id":"download","name":"Download"},{"id":"upload","name":"Upload"},{"id":"filter","name":"Filter"},{"id":"read","name":"Read"},{"id":"pin","name":"Pin"},{"id":"user","name":"User"},{"id":"language","name":"Language"},{"id":"linkedin","name":"Linkedin"},{"id":"facebook","name":"Facebook"},{"id":"instagram","name":"Instagram"},{"id":"twitter","name":"Twitter"},{"id":"x","name":"X"},{"id":"external-link","name":"External Link"},{"id":"app-share","name":"App Share"},{"id":"print","name":"Print"},{"id":"chapters","name":"Chapters"},{"id":"article","name":"Article"},{"id":"padlock","name":"Padlock"},{"id":"trash","name":"Trash"},{"id":"link","name":"Link"},{"id":"share","name":"Share"},{"id":"questionmark","name":"Questionmark"},{"id":"info","name":"Info"},{"id":"contrast","name":"Contrast"},{"id":"gauge","name":"Gauge"},{"id":"backward-15","name":"Backward 15"},{"id":"step-backwards","name":"Step Backwards"},{"id":"play","name":"Play"},{"id":"step-forwards","name":"Step Forwards"},{"id":"forward-60","name":"Forward 60"},{"id":"pause","name":"Pause"},{"id":"subtitles","name":"Subtitles"},{"id":"author","name":"Author"},{"id":"copy","name":"Copy"},{"id":"speaker","name":"Speaker"},{"id":"mute","name":"Mute"},{"id":"settings","name":"Settings"},{"id":"lte","name":"Lte"},{"id":"wifi","name":"Wifi"},{"id":"reception","name":"Reception"},{"id":"2g","name":"2g"},{"id":"3g","name":"3g"},{"id":"4g","name":"4g"},{"id":"5g","name":"5g"},{"id":"latency","name":"Latency"},{"id":"spinner","name":"Spinner"},{"id":"spinner-white","name":"Spinner White"},{"id":"3d","name":"3d"},{"id":"accessibility","name":"Accessibility"},{"id":"cafe","name":"Cafe"},{"id":"capacity","name":"Capacity"},{"id":"display","name":"Display"},{"id":"email","name":"Email"},{"id":"headset","name":"Headset"},{"id":"phone","name":"Phone"},{"id":"plus","name":"Plus"},{"id":"podcast","name":"Podcast"},{"id":"richtext-bold","name":"Richtext Bold"},{"id":"richtext-italic","name":"Richtext Italic"},{"id":"richtext-heading-2","name":"Richtext Heading 2"},{"id":"richtext-heading-3","name":"Richtext Heading 3"},{"id":"richtext-bullet-list","name":"Richtext Bullet List"},{"id":"richtext-ordered-list","name":"Richtext Ordered List"},{"id":"streaming","name":"Streaming"},{"id":"time","name":"Time"},{"id":"drag-item","name":"Drag Item"},{"id":"personal-data","name":"Personal Data"},{"id":"romance","name":"Romance"},{"id":"shopping","name":"Shopping"},{"id":"warning","name":"Warning"},{"id":"diamond","name":"Diamond"},{"id":"world","name":"World"},{"id":"table","name":"Table"}]
package/src/configurations/typography/_typography.scss CHANGED
@@ -137,15 +137,6 @@ dl {
137
137
  );
138
138
  }
139
139
 
140
- ul,
141
- ol,
142
- dl {
143
- + h2,
144
- + .beta {
145
- margin-top: func.rhythm(5);
146
- }
147
- }
148
-
149
140
  .small,
150
141
  small {
151
142
  @include plumber.plumber(
package/src/atoms/icon/heading-2.svg DELETED
@@ -1,15 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15" width="17" height="15">
3
- <defs>
4
- <style>
5
- .cls-1 {
6
- fill: none;
7
- }
8
- </style>
9
- </defs>
10
- <g>
11
- <path d="M.07,2.35h1.9v4.09h4.4V2.35h1.9v10.23h-1.9v-4.39H1.97v4.39H.07V2.35Z"/>
12
- <path d="M10.31,10.88c.82-.59,1.52-1.13,2.12-1.63.6-.5,1.13-1.08,1.59-1.72.46-.65.69-1.3.69-1.96,0-.46-.12-.84-.37-1.13-.25-.29-.61-.43-1.09-.43-.56,0-.98.2-1.25.6-.27.4-.42.9-.44,1.49l-1.79-.14c0-.63.14-1.23.42-1.8.28-.57.69-1.03,1.22-1.39.53-.36,1.16-.53,1.89-.53.62,0,1.18.14,1.66.4s.87.65,1.14,1.14c.27.49.41,1.06.41,1.71,0,1.03-.34,2.01-1.03,2.93-.68.92-1.61,1.74-2.79,2.46h4.22v1.7h-7.06v-1.38l.45-.32Z"/>
13
- </g>
14
- <rect class="cls-1" width="17" height="15"/>
15
- </svg>