Unbreak build.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kalliope",
   "license": "BSD-2-Clause",
-  "version": "0.8.12",
+  "version": "0.8.13",
   "type": "module",
   "files": [
     "dist"
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "^0.17.6",
-    "@excalidraw/utils": "^0.1.2",
+    "@excalidraw/utils": "^0.1.3-test13",
     "@lexical/clipboard": "0.17.0",
     "@lexical/code": "0.17.0",
     "@lexical/file": "0.17.0",
@@ -42,6 +42,7 @@
     "emoji-toolkit": "^9.0.1",
     "emojibase": "15.3.1",
     "emojibase-data": "15.3.2",
+    "fractional-indexing": "^3.2.0",
     "katex": "^0.16.11",
     "lexical": "0.17.0",
     "react": "^18.3.1",

src/Kalliope/KalliopeEditor.css

@@ -642,10 +642,11 @@ i.chevron-down {
 .calliope-table {
   border-collapse: collapse;
   border-spacing: 0;
-  max-width: 100%;
   overflow-y: scroll;
+  overflow-x: scroll;
   table-layout: fixed;
-  width: 100%;
+  width: max-content;
+  margin: 0px 25px 30px 0px;
 }
 
 .calliope-table-cell {
@@ -663,11 +664,8 @@ i.chevron-down {
 
 .calliope-editor-table-add-columns {
   position: absolute;
-  top: 0;
-  width: 20px;
   background-color: #eee;
   height: 100%;
-  right: 0;
   animation: table-controls 0.2s ease;
   border: 0;
   cursor: pointer;
@@ -694,15 +692,13 @@ i.chevron-down {
 
 .calliope-editor-table-add-rows {
   position: absolute;
-  bottom: -25px;
   width: calc(100% - 25px);
   background-color: #eee;
-  height: 20px;
-  left: 0;
   animation: table-controls 0.2s ease;
   border: 0;
   cursor: pointer;
 }
+
 .calliope-editor-table-add-rows:after {
   background-image: url(UI/Images/plus.svg);
   background-size: contain;
@@ -731,6 +727,12 @@ i.chevron-down {
   }
 }
 
+
+.calliope-editor-table-add-columns:hover,
+.calliope-editor-table-add-rows:hover {
+  background-color: #c9dbf0;
+}
+
 .calliope-table-cell-resize-ruler {
   display: block;
   position: absolute;

src/Kalliope/KalliopeEditor.tsx

@@ -11,7 +11,7 @@ import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {CLEAR_EDITOR_COMMAND, EditorState} from 'lexical';
 import { LexicalComposer } from '@lexical/react/LexicalComposer';
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import ContentEditable from "../UI/ContentEditable";
+import ContentEditable from "./Nodes/UIPath/ContentEditable";
 
 import EditorNodes from './Nodes/Nodes';
 import EditorPlugins from './Plugins/Plugins';

src/Kalliope/Nodes/CiteNode/CiteTextEditor.tsx

@@ -6,7 +6,7 @@ import { CalliopeContext, CalliopeContextType } from '../../context';
 import Plugins from "../../Plugins/Plugins";
 import Nodes from "../Nodes";
 import {RichTextPlugin} from "@lexical/react/LexicalRichTextPlugin";
-import {ContentEditable} from "@lexical/react/LexicalContentEditable";
+import ContentEditable from "../UIPath/ContentEditable";
 import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 
 type CiteEditorProps = {
@@ -64,7 +64,7 @@ const CiteTextEditor = ({ initialEditor, content, readOnly }:CiteEditorProps) =>
   >
     <RichTextPlugin
       placeholder={<div className="editor-placeholder"></div>}
-      contentEditable={<ContentEditable className="CiteNode__contentEditable" />}
+      contentEditable={<ContentEditable placeholder="" className="CiteNode__contentEditable" />}
       ErrorBoundary={LexicalErrorBoundary}
     />
     <Plugins

src/Kalliope/Nodes/ImageNode/PlainTextEditor.tsx

@@ -3,7 +3,7 @@ import type { LexicalEditor } from 'lexical';
 import { createEditor } from 'lexical';
 import { LexicalNestedComposer } from '@lexical/react/LexicalNestedComposer';
 import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
-import ContentEditable from '../../../UI/ContentEditable';
+import ContentEditable from '../UIPath/ContentEditable';
 
 import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';
 import Placeholder from './Placeholder';

src/Kalliope/Nodes/InlineImageNode/InlineImageComponent.tsx

@@ -12,7 +12,7 @@ import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
 import {LexicalErrorBoundary} from '@lexical/react/LexicalErrorBoundary';
 import {LexicalNestedComposer} from '@lexical/react/LexicalNestedComposer';
-import ContentEditable  from '../../../UI/ContentEditable';
+import ContentEditable from '../UIPath/ContentEditable';
 import {RichTextPlugin} from '@lexical/react/LexicalRichTextPlugin';
 import {useLexicalNodeSelection} from '@lexical/react/useLexicalNodeSelection';
 import {mergeRegister} from '@lexical/utils';

src/UI/ContentEditable.tsx → src/Kalliope/Nodes/UIPath/ContentEditable.tsx

@@ -9,7 +9,6 @@
 import './ContentEditable.css';
 
 import {ContentEditable} from '@lexical/react/LexicalContentEditable';
-import * as React from 'react';
 
 type Props = {
   className?: string;

src/Kalliope/Plugins/Plugins.tsx

@@ -19,6 +19,7 @@ import DraggableBlockPlugin from './DraggableBlockPlugin';
 import CollapsiblePlugin from './CollapsiblePlugin';
 import MentionsPlugin from './Mentions/MentionsPlugin';
 import DragDropPastePlugin from './DragDropPastePlugin/index';
+import TableHoverActionsPlugin from './TableHoverActionsPlugin';
 
 //
 const PageBreakPlugin = lazy(() => import( './PageBreak/PageBreakPlugin'));
@@ -105,6 +106,7 @@ function EditorPlugins({
       <EquationsPlugin />
       <TablePlugin />
       <TableCellResizer />
+      <TableHoverActionsPlugin />
       <ImagesPlugin />
       <InlineImagePlugin />
       {!readOnly && (

src/Kalliope/Plugins/TableCellResizer/index.css

@@ -7,6 +7,6 @@
  *
  */
 
-.TableCellResizer__resizer {
+.calliope-table-cell-resizer {
   position: absolute;
 }

src/Kalliope/Plugins/TableCellResizer/index.tsx

@@ -395,12 +395,12 @@ function TableCellResizer({editor}: {editor: LexicalEditor}): JSX.Element {
       {activeCell != null && !isMouseDown && (
         <>
           <div
-            className="TableCellResizer__resizer TableCellResizer__ui"
+            className="calliope-table-cell-resizer TableCellResizer__ui"
             style={resizerStyles.right || undefined}
             onMouseDown={toggleResize('right')}
           />
           <div
-            className="TableCellResizer__resizer TableCellResizer__ui"
+            className="calliope-table-cell-resizer TableCellResizer__ui"
             style={resizerStyles.bottom || undefined}
             onMouseDown={toggleResize('bottom')}
           />

src/Kalliope/editorTheme.ts

@@ -1,4 +1,6 @@
-const theme = {
+import type {EditorThemeClasses} from 'lexical';
+
+const theme:EditorThemeClasses = {
   ltr: 'ltr',
   rtl: 'rtl',
   heading: {
@@ -59,8 +61,6 @@ const theme = {
     variable: 'calliope__tokenVariable',
   },
   table: 'calliope-table',
-  tableAddColumns: 'calliope-editor-table-add-columns',
-  tableAddRows: 'calliope-editor-table-add-rows',
   tableCell: 'calliope-table-cell',
   tableCellActionButton: 'calliope-table-cell-action-button',
   tableCellActionButtonContainer: 'calliope-table-cell-action-button-container',