@react-page-plugins/slate-table
Version:
react-page plugin for slate table
202 lines • 9.81 kB
JavaScript
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
return cooked;
};
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import React, { useState, useCallback, useMemo } from 'react';
import isHotkey from 'is-hotkey';
import throttle from 'lodash/throttle';
import times from 'lodash/times';
import styled from 'styled-components';
import { Slate, withReact, useFocused, useSelected, useSlate } from 'slate-react';
import { createEditor } from 'slate';
import { withHistory } from 'slate-history';
import { Element, Leaf } from './EditableComponents';
import { BlockButton, MarkButton, AddRowBottom, AddRowTop, AddColumnLeft, AddColumnRight, RemoveColumn, RemoveRow, } from './MenuComponents';
import ColorPickerControl from './controls/ColorPickerField';
import ControlledRangeDisableAcross from './controls/ControlledRangeDisableAcross';
import { withTables, countRowCol } from './core';
import { getRow, addCell, addRow, cloneTable } from './table-builder';
import { EditableEdit, EditableReadOnly } from './StyledEditable';
import Spacer from './components/Spacer';
import Flexbox from './components/Flexbox';
var RangeWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 40px;\n padding: 10px;\n overflow: hidden;\n"], ["\n height: 40px;\n padding: 10px;\n overflow: hidden;\n"])));
var throttleUpdate = throttle(function (value, onChange) {
onChange(value);
}, 500, { trailing: true });
var TableProvider = function (props) {
var nodeId = props.nodeId, onChange = props.onChange, data = props.data, children = props.children;
var slate = data.slate, rest = __rest(data, ["slate"]);
var _a = __read(useState(slate || []), 2), value = _a[0], setValue = _a[1];
var editor = useMemo(function () { return withTables(withHistory(withReact(createEditor()))); }, []);
var handleChange = useCallback(function (val) {
setValue(val);
var table = val[0];
var _a = __read(countRowCol(table), 2), rcount = _a[0], ccount = _a[1];
if (rest.columnWidth.length !== ccount) {
var equalWidth_1 = 100 / ccount;
rest.columnWidth = times(ccount, function (v) { return equalWidth_1 + equalWidth_1 * v; });
}
throttleUpdate(__assign({ slate: val }, rest), onChange);
}, [data]);
return (React.createElement(Slate, __assign({}, props, { editor: editor, value: value, onChange: handleChange }), children));
};
var TableEditable = function (props) {
var selected = useSelected();
var focused = useFocused();
var editor = useSlate();
var data = props.data, readOnly = props.readOnly, nodeId = props.nodeId;
var slate = data.slate, rest = __rest(data, ["slate"]);
var renderElement = useCallback(function (props) { return React.createElement(Element, __assign({}, props)); }, []);
var renderLeaf = useCallback(function (props) { return React.createElement(Leaf, __assign({}, props)); }, []);
var handleKeyDown = useCallback(function (event) {
if (isHotkey('shift+enter', event)) {
event.preventDefault();
editor.insertText('\n');
return true;
}
if (isHotkey('enter', event)) {
event.preventDefault();
editor.addParagraph();
return true;
}
return undefined;
}, []);
var StyledEditable = readOnly ? EditableReadOnly : EditableEdit;
return (React.createElement(React.Fragment, null,
!readOnly && (React.createElement("div", { className: "slate-table buttons-row" },
React.createElement("div", { className: "slate-table buttons" },
React.createElement(MarkButton, { format: "bold", icon: "bold" }),
React.createElement(MarkButton, { format: "italic", icon: "italic" }),
React.createElement(MarkButton, { format: "underline", icon: "underline" }),
React.createElement(MarkButton, { format: "code", icon: "code" }),
React.createElement(BlockButton, { format: "heading-two", icon: "heading" }),
React.createElement(BlockButton, { format: "block-quote", icon: "double-quotes" }),
React.createElement(BlockButton, { format: "numbered-list", icon: "list-ordered" }),
React.createElement(BlockButton, { format: "bulleted-list", icon: "list-unordered" })),
"\u00A0",
React.createElement("div", { className: "slate-table buttons" },
React.createElement(AddRowBottom, null),
React.createElement(AddRowTop, null),
React.createElement(AddColumnLeft, null),
React.createElement(AddColumnRight, null),
React.createElement(RemoveColumn, null),
React.createElement(RemoveRow, null)))),
React.createElement(StyledEditable, __assign({}, rest, { renderElement: renderElement, renderLeaf: renderLeaf, readOnly: readOnly, onKeyDown: readOnly ? undefined : handleKeyDown }))));
};
var TableEditableMemo = React.memo(TableEditable);
var ControlComponent = function (_a) {
var _b;
var data = _a.data, onChange = _a.onChange;
return (React.createElement(React.Fragment, null,
React.createElement(Flexbox, null,
React.createElement("div", null,
React.createElement(ColorPickerControl, { label: "Header Color", initialValue: data.headerColor, onChange: function (headerColor) { return throttleUpdate({ headerColor: headerColor }, onChange); } })),
React.createElement(Spacer, { width: "10px" }),
React.createElement("div", null,
React.createElement(ColorPickerControl, { label: "Even Color", initialValue: data.evenColor, onChange: function (evenColor) { return throttleUpdate({ evenColor: evenColor }, onChange); } })),
React.createElement(Spacer, { width: "10px" }),
React.createElement("div", null,
React.createElement(ColorPickerControl, { label: "Odd Color", initialValue: data.oddColor, onChange: function (oddColor) { return throttleUpdate({ oddColor: oddColor }, onChange); } }))),
React.createElement(Spacer, { height: "5px" }),
React.createElement("span", null, "Column Widths (comma-separated)"),
React.createElement(RangeWrapper, null,
React.createElement(ControlledRangeDisableAcross, { key: ((_b = data.columnWidth) === null || _b === void 0 ? void 0 : _b.length) || 'randomkey', initialValue: data.columnWidth, onChange: function (columnWidth) { return throttleUpdate({ columnWidth: columnWidth }, onChange); } }))));
};
var controls = {
type: 'custom',
dark: false,
Component: React.memo(ControlComponent),
};
var createInitialData = function () {
var row = 2;
var column = 3;
var table = cloneTable();
addRow(table, row);
for (var r = 0; r < row; r++) {
var row_1 = getRow(table, r);
addCell(row_1, column);
}
var slate = [table];
return {
slate: slate,
headerColor: '#fff',
evenColor: '#fff',
oddColor: '#fff',
columnWidth: [33.3, 66.6, 100],
};
};
var unserialize = function (data) {
if (!data.headerColor)
data.headerColor = '#fff';
if (!data.evenColor)
data.evenColor = '#fff';
if (!data.oddColor)
data.oddColor = '#fff';
if (Array.isArray(data.slate) && data.slate.length > 0) {
var _a = __read(countRowCol(data.slate[0]), 2), rcount = _a[0], ccount = _a[1];
if (!data.columnWidth || data.columnWidth.length !== ccount) {
var equalWidth_2 = 100 / ccount;
data.columnWidth = times(ccount, function (v) { return equalWidth_2 + equalWidth_2 * v; });
}
}
else {
data.columnWidth = [];
}
return data;
};
export var tableId = 'slate/ajm/table';
var createTablePlugin = function (props) {
return {
id: tableId,
title: 'Table',
description: 'A Slate table',
version: 0.1,
allowClickInside: true,
Provider: TableProvider,
Renderer: TableEditableMemo,
controls: controls,
createInitialData: createInitialData,
unserialize: unserialize,
};
};
export default createTablePlugin;
var templateObject_1;
//# sourceMappingURL=index.js.map