@malaya_jeeva/rich-text-editor 1.0.9 → 1.0.11

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 (3) hide show
  1. package/dist/index.js +192 -6
  2. package/dist/index.mjs +192 -6
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -129,7 +129,7 @@ var CSS = `
129
129
  .rte-body ol{list-style-type:decimal;padding-left:1.6em;margin:0.3em 0;}
130
130
  .rte-body ol ol{list-style-type:lower-alpha;padding-left:1.6em;}
131
131
  .rte-body ol ol ol{list-style-type:lower-roman;padding-left:1.6em;}
132
- .rte-body ol ol ol ol{list-style-type:decimal;padding-left:1.6em;}
132
+ .rte-body ol ol ol ol{list-style-type:upper-alpha;padding-left:1.6em;}
133
133
  .rte-body ul{list-style-type:disc;padding-left:1.6em;margin:0.3em 0;}
134
134
  .rte-body ul ul{list-style-type:circle;padding-left:1.6em;}
135
135
  .rte-body ul ul ul{list-style-type:square;padding-left:1.6em;}
@@ -1212,6 +1212,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1212
1212
  }, []);
1213
1213
  const refresh = (0, import_react5.useCallback)(() => {
1214
1214
  var _a2, _b, _c, _d;
1215
+ fixListNesting();
1215
1216
  const raw = document.queryCommandValue("formatBlock").toLowerCase().replace(/[<>]/g, "");
1216
1217
  const block = ["h1", "h2", "h3"].includes(raw) ? raw : "p";
1217
1218
  setColor(getColorAtCursor(editorRef.current));
@@ -1244,14 +1245,98 @@ function RichTextEditor({ value, onChange, toolbar }) {
1244
1245
  setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
1245
1246
  onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
1246
1247
  }, [onChange, calcFloat, linkBar, sanitizeScriptTags]);
1248
+ const fixListInParagraph = (0, import_react5.useCallback)(() => {
1249
+ var _a2;
1250
+ (_a2 = editorRef.current) == null ? void 0 : _a2.querySelectorAll("p > ol, p > ul").forEach((list) => {
1251
+ var _a3;
1252
+ const p = list.parentElement;
1253
+ p.insertAdjacentElement("afterend", list);
1254
+ if (!((_a3 = p.textContent) == null ? void 0 : _a3.trim()) && !p.querySelector("img, br")) p.remove();
1255
+ });
1256
+ }, []);
1257
+ const tryAutoList = (0, import_react5.useCallback)(() => {
1258
+ var _a2, _b, _c, _d, _e, _f;
1259
+ const sel = window.getSelection();
1260
+ if (!(sel == null ? void 0 : sel.rangeCount) || !sel.getRangeAt(0).collapsed) return false;
1261
+ const range = sel.getRangeAt(0);
1262
+ const anchor = range.startContainer;
1263
+ if (anchor.nodeType !== Node.TEXT_NODE) return false;
1264
+ const textBefore = (_b = (_a2 = anchor.textContent) == null ? void 0 : _a2.slice(0, range.startOffset)) != null ? _b : "";
1265
+ const marker = textBefore.trim();
1266
+ if (!marker) return false;
1267
+ const block = (_c = anchor.parentElement) == null ? void 0 : _c.closest("p, div");
1268
+ if (!block || ((_d = block.textContent) != null ? _d : "").trim() !== marker) return false;
1269
+ if (block.tagName === "LI") return false;
1270
+ const romanToInt = (s) => {
1271
+ var _a3;
1272
+ const map = { i: 1, v: 5, x: 10, l: 50, c: 100, d: 500, m: 1e3 };
1273
+ let n = 0, prev = 0;
1274
+ for (const ch of s.toLowerCase().split("").reverse()) {
1275
+ const v = (_a3 = map[ch]) != null ? _a3 : 0;
1276
+ n += v < prev ? -v : v;
1277
+ prev = v;
1278
+ }
1279
+ return n;
1280
+ };
1281
+ let spec = null;
1282
+ const dM = marker.match(/^(\d+)\.$/), aM = marker.match(/^([a-z])\.$/);
1283
+ const AM = marker.match(/^([A-Z])\.$/), rM = marker.match(/^([ivxlcdm]{1,6})\.$/i);
1284
+ if (/^[-*]$/.test(marker)) spec = { tag: "ul" };
1285
+ else if (dM) spec = { tag: "ol", olType: "1", start: parseInt(dM[1]) };
1286
+ else if (aM) spec = { tag: "ol", olType: "a", start: aM[1].charCodeAt(0) - 96 };
1287
+ else if (AM) spec = { tag: "ol", olType: "A", start: AM[1].charCodeAt(0) - 64 };
1288
+ else if (rM && romanToInt(rM[1]) > 0) spec = { tag: "ol", olType: "i", start: romanToInt(rM[1]) };
1289
+ if (!spec) return false;
1290
+ const listMatches = (el) => {
1291
+ var _a3;
1292
+ if (spec.tag === "ul") return el.tagName === "UL";
1293
+ if (el.tagName !== "OL") return false;
1294
+ return (el.getAttribute("type") || "1") === ((_a3 = spec.olType) != null ? _a3 : "1");
1295
+ };
1296
+ const parentLi = ((_e = block.parentElement) == null ? void 0 : _e.tagName) === "LI" ? block.parentElement : null;
1297
+ let targetList = null;
1298
+ let sib = block.previousElementSibling;
1299
+ while (sib) {
1300
+ if (listMatches(sib)) {
1301
+ targetList = sib;
1302
+ break;
1303
+ }
1304
+ if (!parentLi && ((_f = sib.textContent) != null ? _f : "").trim()) break;
1305
+ sib = sib.previousElementSibling;
1306
+ }
1307
+ const newLi = document.createElement("li");
1308
+ newLi.appendChild(document.createElement("br"));
1309
+ if (targetList) {
1310
+ targetList.appendChild(newLi);
1311
+ block.remove();
1312
+ } else {
1313
+ const list = document.createElement(spec.tag);
1314
+ if (spec.tag === "ol") {
1315
+ if (spec.olType && spec.olType !== "1") list.setAttribute("type", spec.olType);
1316
+ if (spec.start && spec.start > 1) list.setAttribute("start", String(spec.start));
1317
+ }
1318
+ list.appendChild(newLi);
1319
+ block.replaceWith(list);
1320
+ }
1321
+ const r = document.createRange();
1322
+ r.setStart(newLi, 0);
1323
+ r.collapse(true);
1324
+ sel.removeAllRanges();
1325
+ sel.addRange(r);
1326
+ refresh();
1327
+ return true;
1328
+ }, [refresh]);
1247
1329
  const exec = (0, import_react5.useCallback)((cmd, val = null) => {
1248
1330
  var _a2;
1249
1331
  (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
1250
1332
  document.execCommand(cmd, false, val != null ? val : void 0);
1251
1333
  fixFontTags();
1252
1334
  fixListNesting();
1335
+ if (cmd === "insertUnorderedList" || cmd === "insertOrderedList") {
1336
+ fixListInParagraph();
1337
+ }
1253
1338
  refresh();
1254
- }, [fixFontTags, fixListNesting, refresh]);
1339
+ }, [fixFontTags, fixListNesting, fixListInParagraph, refresh]);
1255
1340
  const insertImage = (0, import_react5.useCallback)((src) => {
1256
1341
  var _a2;
1257
1342
  (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1295,9 +1380,109 @@ function RichTextEditor({ value, onChange, toolbar }) {
1295
1380
  }
1296
1381
  }, [applySelection]);
1297
1382
  const handleKeyDown = (0, import_react5.useCallback)((e) => {
1298
- var _a2, _b;
1383
+ var _a2, _b, _c, _d, _e, _f, _g, _h;
1299
1384
  clearSelection();
1300
1385
  clearImageSel();
1386
+ if (e.key === " ") {
1387
+ if (tryAutoList()) {
1388
+ e.preventDefault();
1389
+ return;
1390
+ }
1391
+ }
1392
+ if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
1393
+ const sel = window.getSelection();
1394
+ if (sel == null ? void 0 : sel.rangeCount) {
1395
+ const anchor = sel.getRangeAt(0).startContainer;
1396
+ const p = (_a2 = anchor.nodeType === Node.TEXT_NODE ? anchor.parentElement : anchor) == null ? void 0 : _a2.closest("p");
1397
+ const li = ((_b = p == null ? void 0 : p.parentElement) == null ? void 0 : _b.tagName) === "LI" ? p.parentElement : null;
1398
+ const parentList = li == null ? void 0 : li.parentElement;
1399
+ if (p && li && ((parentList == null ? void 0 : parentList.tagName) === "OL" || (parentList == null ? void 0 : parentList.tagName) === "UL")) {
1400
+ e.preventDefault();
1401
+ const pIsEmpty = !((_c = p.textContent) == null ? void 0 : _c.trim()) && !p.querySelector("img, table");
1402
+ if (pIsEmpty) {
1403
+ const newLi = document.createElement("li");
1404
+ newLi.appendChild(document.createElement("br"));
1405
+ li.insertAdjacentElement("afterend", newLi);
1406
+ p.remove();
1407
+ const r = document.createRange();
1408
+ r.setStart(newLi, 0);
1409
+ r.collapse(true);
1410
+ sel.removeAllRanges();
1411
+ sel.addRange(r);
1412
+ } else {
1413
+ const newP = document.createElement("p");
1414
+ newP.appendChild(document.createElement("br"));
1415
+ p.insertAdjacentElement("afterend", newP);
1416
+ const r = document.createRange();
1417
+ r.setStart(newP, 0);
1418
+ r.collapse(true);
1419
+ sel.removeAllRanges();
1420
+ sel.addRange(r);
1421
+ }
1422
+ refresh();
1423
+ return;
1424
+ }
1425
+ }
1426
+ }
1427
+ if (e.key === "Backspace" && !e.ctrlKey && !e.metaKey && !e.altKey) {
1428
+ const sel = window.getSelection();
1429
+ if ((sel == null ? void 0 : sel.rangeCount) && sel.getRangeAt(0).collapsed) {
1430
+ const anchor = sel.getRangeAt(0).startContainer;
1431
+ const li = (_d = anchor.nodeType === Node.TEXT_NODE ? anchor.parentElement : anchor) == null ? void 0 : _d.closest("li");
1432
+ if (li) {
1433
+ const isEmpty = !((_e = li.textContent) == null ? void 0 : _e.trim()) && !li.querySelector("img, table, ol, ul");
1434
+ const parentList = li.parentElement;
1435
+ const grandParent = parentList == null ? void 0 : parentList.parentElement;
1436
+ if (isEmpty && parentList) {
1437
+ const prevLi = ((_f = li.previousElementSibling) == null ? void 0 : _f.tagName) === "LI" ? li.previousElementSibling : null;
1438
+ if (prevLi) {
1439
+ e.preventDefault();
1440
+ li.remove();
1441
+ const p = document.createElement("p");
1442
+ p.appendChild(document.createElement("br"));
1443
+ prevLi.appendChild(p);
1444
+ const r = document.createRange();
1445
+ r.setStart(p, 0);
1446
+ r.collapse(true);
1447
+ sel.removeAllRanges();
1448
+ sel.addRange(r);
1449
+ refresh();
1450
+ return;
1451
+ }
1452
+ const isNested = (grandParent == null ? void 0 : grandParent.tagName) === "LI" || (grandParent == null ? void 0 : grandParent.tagName) === "OL" || (grandParent == null ? void 0 : grandParent.tagName) === "UL";
1453
+ if (isNested && grandParent) {
1454
+ e.preventDefault();
1455
+ li.remove();
1456
+ const p = document.createElement("p");
1457
+ p.appendChild(document.createElement("br"));
1458
+ if (!parentList.querySelector("li")) {
1459
+ parentList.insertAdjacentElement("afterend", p);
1460
+ parentList.remove();
1461
+ } else {
1462
+ parentList.insertAdjacentElement("afterend", p);
1463
+ }
1464
+ const r = document.createRange();
1465
+ r.setStart(p, 0);
1466
+ r.collapse(true);
1467
+ sel.removeAllRanges();
1468
+ sel.addRange(r);
1469
+ refresh();
1470
+ return;
1471
+ }
1472
+ }
1473
+ }
1474
+ }
1475
+ }
1476
+ if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {
1477
+ const sel = window.getSelection();
1478
+ if (sel == null ? void 0 : sel.rangeCount) {
1479
+ const anchor = sel.anchorNode;
1480
+ const parent = (anchor == null ? void 0 : anchor.nodeType) === Node.TEXT_NODE ? anchor.parentElement : anchor;
1481
+ if (parent === editorRef.current) {
1482
+ document.execCommand("formatBlock", false, fmt.block || "p");
1483
+ }
1484
+ }
1485
+ }
1301
1486
  if (e.key === "Tab") {
1302
1487
  e.preventDefault();
1303
1488
  const cell = getCurrentCell();
@@ -1310,8 +1495,8 @@ function RichTextEditor({ value, onChange, toolbar }) {
1310
1495
  }
1311
1496
  return;
1312
1497
  }
1313
- const node = (_a2 = window.getSelection()) == null ? void 0 : _a2.anchorNode;
1314
- const li = (node == null ? void 0 : node.nodeType) === 1 ? node.closest("li") : (_b = node == null ? void 0 : node.parentElement) == null ? void 0 : _b.closest("li");
1498
+ const node = (_g = window.getSelection()) == null ? void 0 : _g.anchorNode;
1499
+ const li = (node == null ? void 0 : node.nodeType) === 1 ? node.closest("li") : (_h = node == null ? void 0 : node.parentElement) == null ? void 0 : _h.closest("li");
1315
1500
  if (li) exec(e.shiftKey ? "outdent" : "indent");
1316
1501
  else document.execCommand("insertText", false, "\xA0\xA0\xA0\xA0");
1317
1502
  }
@@ -1329,7 +1514,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1329
1514
  exec("underline");
1330
1515
  }
1331
1516
  }
1332
- }, [exec, clearSelection, clearImageSel]);
1517
+ }, [exec, tryAutoList, clearSelection, clearImageSel, fmt.block]);
1333
1518
  const insertTable = (rows, cols) => {
1334
1519
  var _a2;
1335
1520
  (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1495,6 +1680,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1495
1680
  };
1496
1681
  (0, import_react5.useEffect)(() => {
1497
1682
  if (editorRef.current) {
1683
+ document.execCommand("defaultParagraphSeparator", false, "p");
1498
1684
  editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "<p>Start writing here...</p>");
1499
1685
  refresh();
1500
1686
  }
package/dist/index.mjs CHANGED
@@ -108,7 +108,7 @@ var CSS = `
108
108
  .rte-body ol{list-style-type:decimal;padding-left:1.6em;margin:0.3em 0;}
109
109
  .rte-body ol ol{list-style-type:lower-alpha;padding-left:1.6em;}
110
110
  .rte-body ol ol ol{list-style-type:lower-roman;padding-left:1.6em;}
111
- .rte-body ol ol ol ol{list-style-type:decimal;padding-left:1.6em;}
111
+ .rte-body ol ol ol ol{list-style-type:upper-alpha;padding-left:1.6em;}
112
112
  .rte-body ul{list-style-type:disc;padding-left:1.6em;margin:0.3em 0;}
113
113
  .rte-body ul ul{list-style-type:circle;padding-left:1.6em;}
114
114
  .rte-body ul ul ul{list-style-type:square;padding-left:1.6em;}
@@ -1191,6 +1191,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1191
1191
  }, []);
1192
1192
  const refresh = useCallback3(() => {
1193
1193
  var _a2, _b, _c, _d;
1194
+ fixListNesting();
1194
1195
  const raw = document.queryCommandValue("formatBlock").toLowerCase().replace(/[<>]/g, "");
1195
1196
  const block = ["h1", "h2", "h3"].includes(raw) ? raw : "p";
1196
1197
  setColor(getColorAtCursor(editorRef.current));
@@ -1223,14 +1224,98 @@ function RichTextEditor({ value, onChange, toolbar }) {
1223
1224
  setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
1224
1225
  onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
1225
1226
  }, [onChange, calcFloat, linkBar, sanitizeScriptTags]);
1227
+ const fixListInParagraph = useCallback3(() => {
1228
+ var _a2;
1229
+ (_a2 = editorRef.current) == null ? void 0 : _a2.querySelectorAll("p > ol, p > ul").forEach((list) => {
1230
+ var _a3;
1231
+ const p = list.parentElement;
1232
+ p.insertAdjacentElement("afterend", list);
1233
+ if (!((_a3 = p.textContent) == null ? void 0 : _a3.trim()) && !p.querySelector("img, br")) p.remove();
1234
+ });
1235
+ }, []);
1236
+ const tryAutoList = useCallback3(() => {
1237
+ var _a2, _b, _c, _d, _e, _f;
1238
+ const sel = window.getSelection();
1239
+ if (!(sel == null ? void 0 : sel.rangeCount) || !sel.getRangeAt(0).collapsed) return false;
1240
+ const range = sel.getRangeAt(0);
1241
+ const anchor = range.startContainer;
1242
+ if (anchor.nodeType !== Node.TEXT_NODE) return false;
1243
+ const textBefore = (_b = (_a2 = anchor.textContent) == null ? void 0 : _a2.slice(0, range.startOffset)) != null ? _b : "";
1244
+ const marker = textBefore.trim();
1245
+ if (!marker) return false;
1246
+ const block = (_c = anchor.parentElement) == null ? void 0 : _c.closest("p, div");
1247
+ if (!block || ((_d = block.textContent) != null ? _d : "").trim() !== marker) return false;
1248
+ if (block.tagName === "LI") return false;
1249
+ const romanToInt = (s) => {
1250
+ var _a3;
1251
+ const map = { i: 1, v: 5, x: 10, l: 50, c: 100, d: 500, m: 1e3 };
1252
+ let n = 0, prev = 0;
1253
+ for (const ch of s.toLowerCase().split("").reverse()) {
1254
+ const v = (_a3 = map[ch]) != null ? _a3 : 0;
1255
+ n += v < prev ? -v : v;
1256
+ prev = v;
1257
+ }
1258
+ return n;
1259
+ };
1260
+ let spec = null;
1261
+ const dM = marker.match(/^(\d+)\.$/), aM = marker.match(/^([a-z])\.$/);
1262
+ const AM = marker.match(/^([A-Z])\.$/), rM = marker.match(/^([ivxlcdm]{1,6})\.$/i);
1263
+ if (/^[-*]$/.test(marker)) spec = { tag: "ul" };
1264
+ else if (dM) spec = { tag: "ol", olType: "1", start: parseInt(dM[1]) };
1265
+ else if (aM) spec = { tag: "ol", olType: "a", start: aM[1].charCodeAt(0) - 96 };
1266
+ else if (AM) spec = { tag: "ol", olType: "A", start: AM[1].charCodeAt(0) - 64 };
1267
+ else if (rM && romanToInt(rM[1]) > 0) spec = { tag: "ol", olType: "i", start: romanToInt(rM[1]) };
1268
+ if (!spec) return false;
1269
+ const listMatches = (el) => {
1270
+ var _a3;
1271
+ if (spec.tag === "ul") return el.tagName === "UL";
1272
+ if (el.tagName !== "OL") return false;
1273
+ return (el.getAttribute("type") || "1") === ((_a3 = spec.olType) != null ? _a3 : "1");
1274
+ };
1275
+ const parentLi = ((_e = block.parentElement) == null ? void 0 : _e.tagName) === "LI" ? block.parentElement : null;
1276
+ let targetList = null;
1277
+ let sib = block.previousElementSibling;
1278
+ while (sib) {
1279
+ if (listMatches(sib)) {
1280
+ targetList = sib;
1281
+ break;
1282
+ }
1283
+ if (!parentLi && ((_f = sib.textContent) != null ? _f : "").trim()) break;
1284
+ sib = sib.previousElementSibling;
1285
+ }
1286
+ const newLi = document.createElement("li");
1287
+ newLi.appendChild(document.createElement("br"));
1288
+ if (targetList) {
1289
+ targetList.appendChild(newLi);
1290
+ block.remove();
1291
+ } else {
1292
+ const list = document.createElement(spec.tag);
1293
+ if (spec.tag === "ol") {
1294
+ if (spec.olType && spec.olType !== "1") list.setAttribute("type", spec.olType);
1295
+ if (spec.start && spec.start > 1) list.setAttribute("start", String(spec.start));
1296
+ }
1297
+ list.appendChild(newLi);
1298
+ block.replaceWith(list);
1299
+ }
1300
+ const r = document.createRange();
1301
+ r.setStart(newLi, 0);
1302
+ r.collapse(true);
1303
+ sel.removeAllRanges();
1304
+ sel.addRange(r);
1305
+ refresh();
1306
+ return true;
1307
+ }, [refresh]);
1226
1308
  const exec = useCallback3((cmd, val = null) => {
1227
1309
  var _a2;
1228
1310
  (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
1229
1311
  document.execCommand(cmd, false, val != null ? val : void 0);
1230
1312
  fixFontTags();
1231
1313
  fixListNesting();
1314
+ if (cmd === "insertUnorderedList" || cmd === "insertOrderedList") {
1315
+ fixListInParagraph();
1316
+ }
1232
1317
  refresh();
1233
- }, [fixFontTags, fixListNesting, refresh]);
1318
+ }, [fixFontTags, fixListNesting, fixListInParagraph, refresh]);
1234
1319
  const insertImage = useCallback3((src) => {
1235
1320
  var _a2;
1236
1321
  (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1274,9 +1359,109 @@ function RichTextEditor({ value, onChange, toolbar }) {
1274
1359
  }
1275
1360
  }, [applySelection]);
1276
1361
  const handleKeyDown = useCallback3((e) => {
1277
- var _a2, _b;
1362
+ var _a2, _b, _c, _d, _e, _f, _g, _h;
1278
1363
  clearSelection();
1279
1364
  clearImageSel();
1365
+ if (e.key === " ") {
1366
+ if (tryAutoList()) {
1367
+ e.preventDefault();
1368
+ return;
1369
+ }
1370
+ }
1371
+ if (e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey) {
1372
+ const sel = window.getSelection();
1373
+ if (sel == null ? void 0 : sel.rangeCount) {
1374
+ const anchor = sel.getRangeAt(0).startContainer;
1375
+ const p = (_a2 = anchor.nodeType === Node.TEXT_NODE ? anchor.parentElement : anchor) == null ? void 0 : _a2.closest("p");
1376
+ const li = ((_b = p == null ? void 0 : p.parentElement) == null ? void 0 : _b.tagName) === "LI" ? p.parentElement : null;
1377
+ const parentList = li == null ? void 0 : li.parentElement;
1378
+ if (p && li && ((parentList == null ? void 0 : parentList.tagName) === "OL" || (parentList == null ? void 0 : parentList.tagName) === "UL")) {
1379
+ e.preventDefault();
1380
+ const pIsEmpty = !((_c = p.textContent) == null ? void 0 : _c.trim()) && !p.querySelector("img, table");
1381
+ if (pIsEmpty) {
1382
+ const newLi = document.createElement("li");
1383
+ newLi.appendChild(document.createElement("br"));
1384
+ li.insertAdjacentElement("afterend", newLi);
1385
+ p.remove();
1386
+ const r = document.createRange();
1387
+ r.setStart(newLi, 0);
1388
+ r.collapse(true);
1389
+ sel.removeAllRanges();
1390
+ sel.addRange(r);
1391
+ } else {
1392
+ const newP = document.createElement("p");
1393
+ newP.appendChild(document.createElement("br"));
1394
+ p.insertAdjacentElement("afterend", newP);
1395
+ const r = document.createRange();
1396
+ r.setStart(newP, 0);
1397
+ r.collapse(true);
1398
+ sel.removeAllRanges();
1399
+ sel.addRange(r);
1400
+ }
1401
+ refresh();
1402
+ return;
1403
+ }
1404
+ }
1405
+ }
1406
+ if (e.key === "Backspace" && !e.ctrlKey && !e.metaKey && !e.altKey) {
1407
+ const sel = window.getSelection();
1408
+ if ((sel == null ? void 0 : sel.rangeCount) && sel.getRangeAt(0).collapsed) {
1409
+ const anchor = sel.getRangeAt(0).startContainer;
1410
+ const li = (_d = anchor.nodeType === Node.TEXT_NODE ? anchor.parentElement : anchor) == null ? void 0 : _d.closest("li");
1411
+ if (li) {
1412
+ const isEmpty = !((_e = li.textContent) == null ? void 0 : _e.trim()) && !li.querySelector("img, table, ol, ul");
1413
+ const parentList = li.parentElement;
1414
+ const grandParent = parentList == null ? void 0 : parentList.parentElement;
1415
+ if (isEmpty && parentList) {
1416
+ const prevLi = ((_f = li.previousElementSibling) == null ? void 0 : _f.tagName) === "LI" ? li.previousElementSibling : null;
1417
+ if (prevLi) {
1418
+ e.preventDefault();
1419
+ li.remove();
1420
+ const p = document.createElement("p");
1421
+ p.appendChild(document.createElement("br"));
1422
+ prevLi.appendChild(p);
1423
+ const r = document.createRange();
1424
+ r.setStart(p, 0);
1425
+ r.collapse(true);
1426
+ sel.removeAllRanges();
1427
+ sel.addRange(r);
1428
+ refresh();
1429
+ return;
1430
+ }
1431
+ const isNested = (grandParent == null ? void 0 : grandParent.tagName) === "LI" || (grandParent == null ? void 0 : grandParent.tagName) === "OL" || (grandParent == null ? void 0 : grandParent.tagName) === "UL";
1432
+ if (isNested && grandParent) {
1433
+ e.preventDefault();
1434
+ li.remove();
1435
+ const p = document.createElement("p");
1436
+ p.appendChild(document.createElement("br"));
1437
+ if (!parentList.querySelector("li")) {
1438
+ parentList.insertAdjacentElement("afterend", p);
1439
+ parentList.remove();
1440
+ } else {
1441
+ parentList.insertAdjacentElement("afterend", p);
1442
+ }
1443
+ const r = document.createRange();
1444
+ r.setStart(p, 0);
1445
+ r.collapse(true);
1446
+ sel.removeAllRanges();
1447
+ sel.addRange(r);
1448
+ refresh();
1449
+ return;
1450
+ }
1451
+ }
1452
+ }
1453
+ }
1454
+ }
1455
+ if (!e.ctrlKey && !e.metaKey && !e.altKey && e.key.length === 1) {
1456
+ const sel = window.getSelection();
1457
+ if (sel == null ? void 0 : sel.rangeCount) {
1458
+ const anchor = sel.anchorNode;
1459
+ const parent = (anchor == null ? void 0 : anchor.nodeType) === Node.TEXT_NODE ? anchor.parentElement : anchor;
1460
+ if (parent === editorRef.current) {
1461
+ document.execCommand("formatBlock", false, fmt.block || "p");
1462
+ }
1463
+ }
1464
+ }
1280
1465
  if (e.key === "Tab") {
1281
1466
  e.preventDefault();
1282
1467
  const cell = getCurrentCell();
@@ -1289,8 +1474,8 @@ function RichTextEditor({ value, onChange, toolbar }) {
1289
1474
  }
1290
1475
  return;
1291
1476
  }
1292
- const node = (_a2 = window.getSelection()) == null ? void 0 : _a2.anchorNode;
1293
- const li = (node == null ? void 0 : node.nodeType) === 1 ? node.closest("li") : (_b = node == null ? void 0 : node.parentElement) == null ? void 0 : _b.closest("li");
1477
+ const node = (_g = window.getSelection()) == null ? void 0 : _g.anchorNode;
1478
+ const li = (node == null ? void 0 : node.nodeType) === 1 ? node.closest("li") : (_h = node == null ? void 0 : node.parentElement) == null ? void 0 : _h.closest("li");
1294
1479
  if (li) exec(e.shiftKey ? "outdent" : "indent");
1295
1480
  else document.execCommand("insertText", false, "\xA0\xA0\xA0\xA0");
1296
1481
  }
@@ -1308,7 +1493,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1308
1493
  exec("underline");
1309
1494
  }
1310
1495
  }
1311
- }, [exec, clearSelection, clearImageSel]);
1496
+ }, [exec, tryAutoList, clearSelection, clearImageSel, fmt.block]);
1312
1497
  const insertTable = (rows, cols) => {
1313
1498
  var _a2;
1314
1499
  (_a2 = editorRef.current) == null ? void 0 : _a2.focus();
@@ -1474,6 +1659,7 @@ function RichTextEditor({ value, onChange, toolbar }) {
1474
1659
  };
1475
1660
  useEffect3(() => {
1476
1661
  if (editorRef.current) {
1662
+ document.execCommand("defaultParagraphSeparator", false, "p");
1477
1663
  editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "<p>Start writing here...</p>");
1478
1664
  refresh();
1479
1665
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@malaya_jeeva/rich-text-editor",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
4
4
  "description": "Custom React Rich Text Editor",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",