Add a table popup for web build

src/core/plugins/table.js

@@ -27,6 +27,7 @@ import { Fragment } from 'prosemirror-model';
 
 class Table {
 	constructor(state, options) {
+		this.popup = { active: false };
 		this.state = { };
 		this.options = options;
 	}
@@ -39,11 +40,19 @@ class Table {
 		let { $from } = this.view.state.selection;
 		for (let i = $from.depth; i >= 0; i--) {
 			let node = $from.node(i);
-			if(node.type === this.view.state.schema.nodes.table) {
+			if (node.type === this.view.state.schema.nodes.table) {
 				this.node = node;
 			}
 		}
 
+		if (this.node) {
+			let dom = this.view.nodeDOM(this.tablePos());
+			this.popup = {
+				active: true,
+				node: dom,
+			};
+		}
+
 		if (oldState && oldState.doc.eq(state.doc) && oldState.selection.eq(state.selection)) {
 			return;
 		}
@@ -204,7 +213,7 @@ class Table {
 	};
 
 	destroy() {
-
+		this.popup = { active: false };
 	}
 }
 

src/stylesheets/themes/_light.scss

@@ -40,7 +40,7 @@ $-colors: (
     color-scrollbar-background: transparent,
 );
 
-@mixin -ligh-rules() {
+@mixin -light-rules() {
     @each $name, $color in $-colors {
             --#{$name}: #{$color};
         }
@@ -80,12 +80,12 @@ $-colors: (
 // Temporarily, force light theme in web build
 @if $platform == 'web' {
     :root {
-        @include -ligh-rules();
+        @include -light-rules();
     }
 } @else {
     @media (prefers-color-scheme: light) {
         :root {
-            @include -ligh-rules();
+            @include -light-rules();
         }
     }
 }

src/ui/editor.js

@@ -9,6 +9,7 @@ import LinkPopup from './popups/link-popup';
 import HighlightPopup from './popups/highlight-popup';
 import CitationPopup from './popups/citation-popup';
 import ImagePopup from './popups/image-popup';
+import TablePopup from './popups/table-popup';
 import Noticebar from './noticebar';
 
 function Editor(props) {
@@ -75,6 +76,7 @@ function Editor(props) {
 			<div className="editor-core" ref={editorRef}>
 				<div className="relative-container">
 					{refReady && !props.disableUI && <Fragment>
+						{['web'].includes(props.viewMode) && !editorState.link?.popup.active && editorState.table.isTableSelected() && <TablePopup parentRef={editorRef} tableState={editorState.table} /> }
 						{editorState.link && <LinkPopup parentRef={editorRef} pluginState={editorState.link.popup}/>}
 						{!['web'].includes(props.viewMode) && editorState.highlight && <HighlightPopup parentRef={editorRef} highlightState={editorState.highlight} citationState={editorState.citation}/>}
 						{!['web'].includes(props.viewMode) && editorState.image && <ImagePopup parentRef={editorRef} imageState={editorState.image} citationState={editorState.citation}/>}

src/ui/popups/table-popup.js

@@ -0,0 +1,93 @@
+'use strict';
+
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl';
+
+import Popup from './popup';
+import IconInsertRowAbove from '../../../res/icons/16/insert-row-above.svg';
+import IconInsertRowBelow from '../../../res/icons/16/insert-row-below.svg';
+import IconInsertColumnRight from '../../../res/icons/16/insert-column-right.svg';
+import IconInsertColumnLeft from '../../../res/icons/16/insert-column-left.svg';
+import IconDeleteRow from '../../../res/icons/16/delete-row.svg';
+import IconDeleteColumn from '../../../res/icons/16/delete-column.svg';
+import IconDeleteTable from '../../../res/icons/16/delete-table.svg';
+
+function TablePopup({ parentRef, tableState }) {
+	const intl = useIntl();
+
+	const handleInsertRowBefore = useCallback(() => {
+		tableState.insertRowBefore();
+	});
+	const handleInsertRowAfter = useCallback(() => {
+		tableState.insertRowAfter();
+	});
+
+	const handleColumnBefore = useCallback(() => {
+		tableState.insertColumnBefore();
+	});
+
+	const handleColumnAfter = useCallback(() => {
+		tableState.insertColumnAfter();
+	});
+
+	const handleDeleteColumn = useCallback(() => {
+		tableState.deleteColumn();
+	});
+
+	const handleDeleteRow = useCallback(() => {
+		tableState.deleteRow();
+	});
+
+	const handleDeleteTable = useCallback(() => {
+		tableState.deleteTable();
+	});
+
+	return (
+		<Popup className="table-popup" parentRef={parentRef} pluginState={tableState.popup}>
+			<button
+				title={intl.formatMessage({ id: 'noteEditor.insertRowBefore' })}
+				onClick={handleInsertRowBefore}
+			>
+				<div className="icon"><IconInsertRowAbove /></div>
+			</button>
+			<button
+				title={intl.formatMessage({ id: 'noteEditor.insertRowAfter' })}
+				onClick={handleInsertRowAfter}
+			>
+				<div className="icon"><IconInsertRowBelow /></div>
+			</button>
+			<button
+				title={intl.formatMessage({ id: 'noteEditor.insertColumnBefore' })}
+				onClick={handleColumnBefore}
+			>
+				<div className="icon"><IconInsertColumnLeft /></div>
+			</button>
+			<button
+				title={intl.formatMessage({ id: 'noteEditor.insertColumnAfter' })}
+				onClick={handleColumnAfter}
+			>
+				<div className="icon"><IconInsertColumnRight /></div>
+			</button>
+			<button
+				title={intl.formatMessage({ id: 'noteEditor.deleteColumn' })}
+				onClick={handleDeleteColumn}
+			>
+				<div className="icon"><IconDeleteColumn /></div>
+			</button>
+			<button
+				title={intl.formatMessage({ id: 'noteEditor.deleteRow' })}
+				onClick={handleDeleteRow}
+			>
+				<div className="icon"><IconDeleteRow /></div>
+			</button>
+			<button
+				title={intl.formatMessage({ id: 'noteEditor.deleteTable' })}
+				onClick={handleDeleteTable}
+			>
+				<div className="icon"><IconDeleteTable /></div>
+			</button>
+		</Popup>
+	);
+}
+
+export default TablePopup;