fable-editor 1.0.1 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fable-editor",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "FableEditor — a rich text editor with React and Angular wrappers",
   "author": "Sajin Satheesan <an.sajinsatheesan@gmail.com>",
   "repository": {
@@ -95,6 +95,7 @@
     "@playwright/test": "^1.61.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
+    "@types/katex": "^0.16.8",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.0",
@@ -109,5 +110,8 @@
     "vite": "^5.3.0",
     "vite-plugin-dts": "^3.9.0",
     "vitest": "^4.1.9"
+  },
+  "dependencies": {
+    "katex": "^0.17.0"
   }
 }

package/style.css

@@ -270,12 +270,12 @@
                word-break: break-word;
           }
 
-          .earea img {
+          .earea img, .earea video {
                max-width: 100%;
                height: auto;
           }
 
-          /* image upload placeholder */
+          /* image / video upload placeholder */
           .earea .img-ph {
                display: flex;
                align-items: center;
@@ -334,6 +334,148 @@
                fill: #c92a2a;
           }
 
+          /* template blocks (image + heading/paragraph layouts) */
+          .earea .tpl {
+               margin: 0 0 1em;
+          }
+
+          .earea .tpl::after {
+               content: "";
+               display: block;
+               clear: both;
+          }
+
+          .earea .tpl.tpl-selected {
+               outline: 2px dashed #a8c7f0;
+               outline-offset: 4px;
+          }
+
+          .earea .tpl-media {
+               text-align: center;
+               margin: 0 0 0.5em;
+          }
+
+          .earea .tpl-media img {
+               display: inline-block;
+               max-width: 100%;
+          }
+
+          .earea .tpl .img-ph {
+               display: inline-flex;
+               width: 300px;
+               max-width: 100%;
+               margin: 0;
+               box-sizing: border-box;
+          }
+
+          /* floated media shrink-wraps to the image, so a small image leaves
+             the text beside it and the paragraph overflows below it */
+          .earea .tpl-img-left .tpl-media {
+               float: left;
+               max-width: 50%;
+               margin: 0 1em 0.5em 0;
+          }
+
+          .earea .tpl-img-right .tpl-media {
+               float: right;
+               max-width: 50%;
+               margin: 0 0 0.5em 1em;
+          }
+
+          .earea .tpl-img-left .img-ph,
+          .earea .tpl-img-right .img-ph {
+               width: 260px;
+          }
+
+          .earea .tpl-text > :first-child {
+               margin-top: 0;
+          }
+
+          /* template picker (popup) — miniature previews of each layout */
+          .tplpick {
+               display: grid;
+               grid-template-columns: 1fr 1fr;
+               gap: 8px;
+               padding: 8px;
+          }
+
+          .tpltile {
+               display: flex;
+               flex-direction: column;
+               gap: 6px;
+               width: 132px;
+               padding: 6px;
+               border: 1px solid #cfd6df;
+               border-radius: 8px;
+               background: #fff;
+               cursor: pointer;
+               font: inherit;
+          }
+
+          .tpltile:hover {
+               border-color: #006ce7;
+               background: #f2f7ff;
+          }
+
+          .tpllbl {
+               font-size: 11px;
+               color: #556;
+               text-align: center;
+          }
+
+          .pv {
+               display: flex;
+               flex-direction: column;
+               gap: 4px;
+               height: 78px;
+               padding: 7px;
+               background: #f7f9fb;
+               border-radius: 5px;
+               box-sizing: border-box;
+          }
+
+          .pv-row {
+               display: flex;
+               gap: 5px;
+               flex: 1;
+               min-height: 0;
+          }
+
+          .pv-col {
+               display: flex;
+               flex-direction: column;
+               gap: 4px;
+               flex: 1;
+          }
+
+          .pv-img {
+               background: #c9d4e0;
+               border-radius: 3px;
+               width: 42%;
+               flex: none;
+          }
+
+          .pv-c .pv-img {
+               width: 68%;
+               height: 32px;
+               align-self: center;
+          }
+
+          .pv-h {
+               height: 7px;
+               width: 55%;
+               background: #8fa3b8;
+               border-radius: 2px;
+               flex: none;
+          }
+
+          .pv-l {
+               height: 5px;
+               background: #dbe3ec;
+               border-radius: 2px;
+               flex: none;
+          }
+
           .earea table.tbl-selected {
                outline: 2px solid #006ce7;
                outline-offset: 1px;
@@ -441,6 +583,50 @@
                outline-offset: 1px;
           }
 
+          /* video align toolbar */
+          .earea video.vid-selected,
+          .earea .video-embed.vid-selected {
+               outline: 2px solid #006ce7;
+               outline-offset: 1px;
+          }
+
+          /* embedded hosted players (YouTube & co.) */
+          .earea .video-embed {
+               display: inline-block;
+               max-width: 100%;
+          }
+
+          .earea .video-embed iframe {
+               /* clicks land on the wrapper so the embed can be selected/aligned */
+               pointer-events: none;
+               display: block;
+               border: 0;
+               max-width: 100%;
+          }
+
+          .earea .tpl-media video,
+          .earea .tpl-media .video-embed {
+               max-width: 100%;
+          }
+
+          /* math / LaTeX formulas */
+          .earea .math-fable {
+               cursor: pointer;
+               border-radius: 4px;
+          }
+
+          .earea .math-fable-block {
+               display: block;
+               text-align: center;
+               margin: 0.5em 0;
+               padding: 4px;
+          }
+
+          .earea .math-fable.math-selected {
+               outline: 2px solid #006ce7;
+               outline-offset: 2px;
+          }
+
           .img-handle {
                position: absolute;
                width: 10px;
@@ -1010,7 +1196,68 @@
                font-size: 14px;
           }
 
-          /* char map */
+          /* char / emoji map: fixed category tabs left, glyph grid right */
+          .chmap {
+               display: flex;
+               width: 560px;
+               max-width: 76vw;
+               height: 320px;
+               max-height: 46vh;
+          }
+
+          .chmap .chtabs {
+               flex: 0 0 158px;
+               display: flex;
+               flex-direction: column;
+               gap: 2px;
+               overflow-y: auto;
+               padding: 6px 8px 6px 0;
+               border-inline-end: 1px solid #e3e8ee;
+          }
+
+          .chmap .chtabs button {
+               border: 0;
+               background: none;
+               text-align: start;
+               padding: 8px 10px;
+               border-radius: 6px;
+               font: 13.5px inherit;
+               color: #222f3e;
+               cursor: pointer;
+               white-space: nowrap;
+          }
+
+          .chmap .chtabs button:hover {
+               background: #f0f0f0;
+          }
+
+          .chmap .chtabs button.on {
+               background: #e8f1fb;
+               color: #0060ce;
+               font-weight: 600;
+          }
+
+          .chmap .chpanel {
+               flex: 1;
+               overflow-y: auto;
+               padding: 6px 0 6px 8px;
+          }
+
+          .chmap .chgrid {
+               grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
+               padding: 0;
+          }
+
+          .chmap .chgrid.emgrid {
+               grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
+          }
+
+          .chmap .chgrid.emgrid button {
+               width: 36px;
+               height: 36px;
+               font-size: 20px;
+          }
+
           .chgrid {
                display: grid;
                grid-template-columns: repeat(8, 30px);
@@ -1151,6 +1398,84 @@
                resize: vertical;
           }
 
+          /* tabbed dialogs (insert/edit video) */
+          .dlg .dtabs {
+               display: flex;
+               gap: 2px;
+               border-bottom: 1px solid #e3e8ee;
+               margin-bottom: 14px;
+          }
+
+          .dlg .dtabs button {
+               border: 0;
+               background: none;
+               padding: 8px 14px;
+               font: 14px inherit;
+               color: #556;
+               cursor: pointer;
+               border-bottom: 2px solid transparent;
+               margin-bottom: -1px;
+          }
+
+          .dlg .dtabs button.on {
+               color: #006ce7;
+               border-bottom-color: #006ce7;
+               font-weight: 600;
+          }
+
+          .dlg .dtabbody {
+               width: 460px;
+               max-width: 76vw;
+               min-height: 150px;
+          }
+
+          .dlg .dtabpanel textarea {
+               width: 100%;
+               box-sizing: border-box;
+          }
+
+          .dlg .dfield {
+               display: flex;
+               flex-direction: column;
+               gap: 4px;
+               margin-bottom: 12px;
+               flex: 1;
+          }
+
+          .dlg .dfield label {
+               font-size: 13px;
+               color: #445;
+          }
+
+          .dlg .dfield input {
+               border: 1px solid #cfd6df;
+               border-radius: 6px;
+               padding: 8px 10px;
+               font: 14px inherit;
+               min-width: 0;
+          }
+
+          .dlg .drow {
+               display: flex;
+               gap: 10px;
+               align-items: flex-end;
+          }
+
+          .dlg button.txtbtn {
+               border: 1px solid #cfd6df;
+               background: #fff;
+               color: #222f3e;
+               border-radius: 6px;
+               padding: 8px 12px;
+               font: 13.5px inherit;
+               cursor: pointer;
+               white-space: nowrap;
+          }
+
+          .dlg button.txtbtn:hover {
+               background: #f0f4f9;
+          }
+
           .dlg table.kbd {
                border-collapse: collapse;
                width: 100%;