@overlap/rte 1.0.3 → 1.0.5

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.
@@ -1 +1 @@
1
- {"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAYjF,OAAO,EAA4B,WAAW,EAAE,MAAM,UAAU,CAAC;AA4BjE,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAktBxC,CAAC"}
1
+ {"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../../src/components/Editor.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAYjF,OAAO,EAA4B,WAAW,EAAE,MAAM,UAAU,CAAC;AA4BjE,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA0tBxC,CAAC"}
package/dist/index.d.ts CHANGED
@@ -201,7 +201,9 @@ interface EditorProps {
201
201
  borderRadius?: number;
202
202
  toolbarBg?: string;
203
203
  buttonHoverBg?: string;
204
+ buttonActiveBg?: string;
204
205
  contentBg?: string;
206
+ textColor?: string;
205
207
  primaryColor?: string;
206
208
  };
207
209
  onImageUpload?: (file: File) => Promise<string>;
package/dist/index.esm.js CHANGED
@@ -268,6 +268,12 @@ function ensureAllCheckboxes(editor) {
268
268
  if (!ul.classList.contains("rte-checkbox-list")) {
269
269
  ul.classList.add("rte-checkbox-list");
270
270
  }
271
+ // Propagate checkbox class to nested ULs inside LI children
272
+ ul.querySelectorAll(":scope > li > ul").forEach((nestedUl) => {
273
+ if (!nestedUl.classList.contains("rte-checkbox-list")) {
274
+ nestedUl.classList.add("rte-checkbox-list");
275
+ }
276
+ });
271
277
  // Handle GitHub format: convert <input type="checkbox"> to aria-checked
272
278
  ul.querySelectorAll(":scope > li").forEach((li) => {
273
279
  const input = li.querySelector('input[type="checkbox"]');
@@ -870,9 +876,8 @@ function domToContent(element) {
870
876
  if (tagName === "input" && el.getAttribute("type") === "checkbox") {
871
877
  return null;
872
878
  }
873
- // Handle <br> as empty text
874
879
  if (tagName === "br") {
875
- return null;
880
+ return { type: "br" };
876
881
  }
877
882
  if (tagName === "img") {
878
883
  const attributes = {};
@@ -1422,8 +1427,10 @@ function indentListItem(selection) {
1422
1427
  // Create nested list in the previous item
1423
1428
  let nestedList = previousItem.querySelector('ul, ol');
1424
1429
  if (!nestedList) {
1425
- // Create new nested list
1426
1430
  nestedList = document.createElement(list.tagName.toLowerCase());
1431
+ if (list.classList.contains('rte-checkbox-list')) {
1432
+ nestedList.classList.add('rte-checkbox-list');
1433
+ }
1427
1434
  previousItem.appendChild(nestedList);
1428
1435
  }
1429
1436
  // Move current item into nested list
@@ -1451,6 +1458,9 @@ function indentListItem(selection) {
1451
1458
  else {
1452
1459
  // No previous item — create new nested list in current item
1453
1460
  const nestedList = document.createElement(list.tagName.toLowerCase());
1461
+ if (list.classList.contains('rte-checkbox-list')) {
1462
+ nestedList.classList.add('rte-checkbox-list');
1463
+ }
1454
1464
  // Move all following items into the nested list
1455
1465
  let nextSibling = listItem.nextElementSibling;
1456
1466
  while (nextSibling && nextSibling.tagName === 'LI') {
@@ -1679,8 +1689,25 @@ function handleMarkdownShortcut(editor, e) {
1679
1689
  /** Remove the trigger characters from the text node before applying formatting. */
1680
1690
  function clearBlockText(textNode, charCount) {
1681
1691
  const text = textNode.textContent || "";
1682
- textNode.textContent = text.substring(charCount);
1683
- // Reset cursor to start
1692
+ const remaining = text.substring(charCount);
1693
+ textNode.textContent = remaining;
1694
+ if (remaining === "") {
1695
+ const parent = textNode.parentElement;
1696
+ if (parent) {
1697
+ parent.removeChild(textNode);
1698
+ const br = document.createElement("br");
1699
+ parent.appendChild(br);
1700
+ const selection = window.getSelection();
1701
+ if (selection) {
1702
+ const range = document.createRange();
1703
+ range.setStart(parent, 0);
1704
+ range.collapse(true);
1705
+ selection.removeAllRanges();
1706
+ selection.addRange(range);
1707
+ }
1708
+ return;
1709
+ }
1710
+ }
1684
1711
  const selection = window.getSelection();
1685
1712
  if (selection) {
1686
1713
  const range = document.createRange();
@@ -3223,7 +3250,7 @@ function createImagePlugin(onImageUpload) {
3223
3250
  }
3224
3251
  }
3225
3252
  };
3226
- return (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: () => setShowModal(true), disabled: props.disabled, className: "rte-toolbar-button", title: "Insert Image", "aria-label": "Insert Image", children: jsx(IconWrapper, { icon: "mdi:image", width: 18, height: 18 }) }), showModal && (jsx("div", { className: "rte-image-modal-overlay", onClick: (e) => {
3253
+ return (jsxs(Fragment, { children: [jsx("button", { type: "button", onClick: () => setShowModal(true), disabled: props.disabled, className: "rte-toolbar-button", title: "Insert Image", "aria-label": "Insert Image", children: jsx(IconWrapper, { icon: "mdi:image", width: 18, height: 18 }) }), showModal && (jsx("div", { className: "rte-image-modal-overlay", onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
3227
3254
  if (e.target === e.currentTarget) {
3228
3255
  setShowModal(false);
3229
3256
  }
@@ -5137,10 +5164,18 @@ const Editor = ({ initialContent, onChange, plugins: providedPlugins, placeholde
5137
5164
  {
5138
5165
  "--rte-button-hover-bg": theme.buttonHoverBg,
5139
5166
  }),
5167
+ ...(theme.buttonActiveBg &&
5168
+ {
5169
+ "--rte-button-active-bg": theme.buttonActiveBg,
5170
+ }),
5140
5171
  ...(theme.contentBg &&
5141
5172
  {
5142
5173
  "--rte-content-bg": theme.contentBg,
5143
5174
  }),
5175
+ ...(theme.textColor &&
5176
+ {
5177
+ "--rte-text-color": theme.textColor,
5178
+ }),
5144
5179
  ...(theme.primaryColor &&
5145
5180
  {
5146
5181
  "--rte-primary-color": theme.primaryColor,