@blocklet/editor-lite 2.6.0

package/lib/main/themes/table/table.css

@@ -0,0 +1,214 @@
+.PlaygroundEditorTheme__tableScrollableWrapper {
+  overflow-x: auto;
+  margin: 0px 25px 30px 0px;
+}
+.PlaygroundEditorTheme__tableScrollableWrapper > .PlaygroundEditorTheme__table {
+  /* Remove the table's vertical margin and put it on the wrapper */
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.PlaygroundEditorTheme__tableAlignmentCenter {
+  margin-left: auto;
+  margin-right: auto;
+}
+.PlaygroundEditorTheme__tableAlignmentRight {
+  margin-left: auto;
+}
+.PlaygroundEditorTheme__table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  overflow-y: scroll;
+  overflow-x: scroll;
+  table-layout: fixed;
+  width: fit-content;
+  margin-top: 25px;
+  margin-bottom: 30px;
+}
+.PlaygroundEditorTheme__tableScrollableWrapper.PlaygroundEditorTheme__tableFrozenRow {
+  /* position:sticky needs overflow:clip or visible
+     https://github.com/w3c/csswg-drafts/issues/865#issuecomment-350585274 */
+  overflow-x: clip;
+}
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td {
+  overflow: clip;
+  background-color: #ffffff;
+  position: sticky;
+  z-index: 2;
+  top: 44px;
+}
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th {
+  overflow: clip;
+  background-color: #f2f3f5;
+  position: sticky;
+  z-index: 2;
+  top: 44px;
+}
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > th:after,
+.PlaygroundEditorTheme__tableFrozenRow tr:nth-of-type(1) > td:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  border-bottom: 1px solid #bbb;
+}
+.PlaygroundEditorTheme__tableFrozenColumn tr > td:first-child {
+  background-color: #ffffff;
+  position: sticky;
+  z-index: 2;
+  left: 0;
+}
+.PlaygroundEditorTheme__tableFrozenColumn tr > th:first-child {
+  background-color: #f2f3f5;
+  position: sticky;
+  z-index: 2;
+  left: 0;
+}
+.PlaygroundEditorTheme__tableFrozenColumn tr > :first-child::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 100%;
+  border-right: 1px solid #bbb;
+}
+.PlaygroundEditorTheme__tableRowStriping tr:nth-child(even) {
+  background-color: #f2f5fb;
+}
+.PlaygroundEditorTheme__tableSelection *::selection {
+  background-color: transparent;
+}
+.PlaygroundEditorTheme__tableSelected {
+  outline: 2px solid rgb(60, 132, 244);
+}
+.PlaygroundEditorTheme__tableCell {
+  border: 1px solid #bbb;
+  width: 75px;
+  vertical-align: top;
+  text-align: start;
+  padding: 6px 8px;
+  position: relative;
+  outline: none;
+  overflow: auto;
+}
+/*
+  A firefox workaround to allow scrolling of overflowing table cell
+  ref: https://bugzilla.mozilla.org/show_bug.cgi?id=1904159
+*/
+.PlaygroundEditorTheme__tableCell > * {
+  overflow: inherit;
+}
+.PlaygroundEditorTheme__tableCellResizer {
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  width: 8px;
+  cursor: ew-resize;
+  z-index: 10;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellHeader {
+  background-color: #f2f3f5;
+  text-align: start;
+}
+.PlaygroundEditorTheme__tableCellSelected {
+  caret-color: transparent;
+}
+.PlaygroundEditorTheme__tableCellSelected::after {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  background-color: highlight;
+  mix-blend-mode: multiply;
+  content: '';
+  pointer-events: none;
+}
+.PlaygroundEditorTheme__tableAddColumns {
+  position: absolute;
+  background-color: #eee;
+  height: 100%;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddColumns:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+.PlaygroundEditorTheme__tableAddColumns:hover,
+.PlaygroundEditorTheme__tableAddRows:hover {
+  background-color: #c9dbf0;
+}
+.PlaygroundEditorTheme__tableAddRows {
+  position: absolute;
+  width: calc(100% - 25px);
+  background-color: #eee;
+  animation: table-controls 0.2s ease;
+  border: 0;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableAddRows:after {
+  background-image: url(../images/icons/plus.svg);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  display: block;
+  content: ' ';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.4;
+}
+@keyframes table-controls {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.PlaygroundEditorTheme__tableCellResizeRuler {
+  display: block;
+  position: absolute;
+  width: 1px;
+  background-color: rgb(60, 132, 244);
+  height: 100%;
+  top: 0;
+}
+.PlaygroundEditorTheme__tableCellActionButtonContainer {
+  display: block;
+  right: 5px;
+  top: 6px;
+  position: absolute;
+  z-index: 4;
+  width: 20px;
+  height: 20px;
+}
+.PlaygroundEditorTheme__tableCellActionButton {
+  background-color: #eee;
+  display: block;
+  border: 0;
+  border-radius: 20px;
+  width: 20px;
+  height: 20px;
+  color: #222;
+  cursor: pointer;
+}
+.PlaygroundEditorTheme__tableCellActionButton:hover {
+  background-color: #ddd;
+}

package/lib/main/ui/Button.css

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+
+.Button__root {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  padding-left: 15px;
+  padding-right: 15px;
+  border: 0px;
+  background-color: #eee;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+}
+.Button__root:hover {
+  background-color: #ddd;
+}
+.Button__small {
+  padding-top: 5px;
+  padding-bottom: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
+  font-size: 13px;
+}
+.Button__disabled {
+  cursor: not-allowed;
+}
+.Button__disabled:hover {
+  background-color: #eee;
+}

package/lib/main/ui/Button.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Button.css';
+import { ReactNode, type JSX } from 'react';
+export default function Button({ 'data-test-id': dataTestId, children, className, onClick, disabled, small, title, }: {
+    'data-test-id'?: string;
+    children: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onClick: () => void;
+    small?: boolean;
+    title?: string;
+}): JSX.Element;

package/lib/main/ui/Button.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Button.css';
+import joinClasses from '../utils/join-classes';
+export default function Button({ 'data-test-id': dataTestId, children, className, onClick, disabled, small, title, }) {
+    return (_jsx("button", { disabled: disabled, className: joinClasses('Button__root', disabled && 'Button__disabled', small && 'Button__small', className), onClick: onClick, title: title, "aria-label": title, ...(dataTestId && { 'data-test-id': dataTestId }), children: children }));
+}

package/lib/main/ui/ColorPicker.css

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+.color-picker-wrapper {
+  padding: 20px;
+  box-sizing: content-box;
+}
+
+.color-picker-basic-color {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin: 0;
+  padding: 0;
+}
+
+.color-picker-basic-color button {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  height: 16px;
+  width: 16px;
+  cursor: pointer;
+  list-style-type: none;
+  box-sizing: border-box;
+}
+
+.color-picker-basic-color button.active {
+  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.3);
+}
+
+.color-picker-saturation {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 150px;
+  background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);
+  user-select: none;
+}
+.color-picker-saturation_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: 0 0 15px #00000026;
+  box-sizing: border-box;
+  transform: translate(-10px, -10px);
+}
+.color-picker-hue {
+  width: 100%;
+  position: relative;
+  margin-top: 15px;
+  height: 12px;
+  background-image: linear-gradient(
+    to right,
+    rgb(255, 0, 0),
+    rgb(255, 255, 0),
+    rgb(0, 255, 0),
+    rgb(0, 255, 255),
+    rgb(0, 0, 255),
+    rgb(255, 0, 255),
+    rgb(255, 0, 0)
+  );
+  user-select: none;
+  border-radius: 12px;
+}
+
+.color-picker-hue_cursor {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ffffff;
+  border-radius: 50%;
+  box-shadow: #0003 0 0 0 0.5px;
+  box-sizing: border-box;
+  transform: translate(-10px, -4px);
+}
+
+.color-picker-color {
+  border: 1px solid #ccc;
+  margin-top: 15px;
+  width: 100%;
+  height: 20px;
+}

package/lib/main/ui/ColorPicker.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './ColorPicker.css';
+import { ReactNode, type JSX } from 'react';
+interface ColorPickerProps {
+    disabled?: boolean;
+    buttonAriaLabel?: string;
+    buttonClassName: string;
+    buttonIconClassName?: string;
+    buttonIconData?: string;
+    buttonLabel?: string;
+    color: string;
+    children?: ReactNode;
+    onChange?: (color: string) => void;
+    title?: string;
+}
+export default function ColorPicker({ color, children, onChange, disabled, ...rest }: Readonly<ColorPickerProps>): JSX.Element;
+export interface Position {
+    x: number;
+    y: number;
+}
+export declare function toHex(value: string): string;
+export {};

package/lib/main/ui/ColorPicker.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './ColorPicker.css';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import DropDown from './DropDown';
+import TextInput from './TextInput';
+const basicColors = [
+    '#d0021b',
+    '#f5a623',
+    '#f8e71c',
+    '#8b572a',
+    '#7ed321',
+    '#417505',
+    '#bd10e0',
+    '#9013fe',
+    '#4a90e2',
+    '#50e3c2',
+    '#b8e986',
+    '#000000',
+    '#4a4a4a',
+    '#9b9b9b',
+    '#ffffff',
+];
+const WIDTH = 214;
+const HEIGHT = 150;
+export default function ColorPicker({ color, children, onChange, disabled = false, ...rest }) {
+    const [selfColor, setSelfColor] = useState(transformColor('hex', color));
+    const [inputColor, setInputColor] = useState(color);
+    const innerDivRef = useRef(null);
+    const saturationPosition = useMemo(() => ({
+        x: (selfColor.hsv.s / 100) * WIDTH,
+        y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
+    }), [selfColor.hsv.s, selfColor.hsv.v]);
+    const huePosition = useMemo(() => ({
+        x: (selfColor.hsv.h / 360) * WIDTH,
+    }), [selfColor.hsv]);
+    const onSetHex = (hex) => {
+        setInputColor(hex);
+        if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
+            const newColor = transformColor('hex', hex);
+            setSelfColor(newColor);
+        }
+    };
+    const onMoveSaturation = ({ x, y }) => {
+        const newHsv = {
+            ...selfColor.hsv,
+            s: (x / WIDTH) * 100,
+            v: 100 - (y / HEIGHT) * 100,
+        };
+        const newColor = transformColor('hsv', newHsv);
+        setSelfColor(newColor);
+        setInputColor(newColor.hex);
+    };
+    const onMoveHue = ({ x }) => {
+        const newHsv = { ...selfColor.hsv, h: (x / WIDTH) * 360 };
+        const newColor = transformColor('hsv', newHsv);
+        setSelfColor(newColor);
+        setInputColor(newColor.hex);
+    };
+    useEffect(() => {
+        // Check if the dropdown is actually active
+        if (innerDivRef.current !== null && onChange) {
+            onChange(selfColor.hex);
+            setInputColor(selfColor.hex);
+        }
+    }, [selfColor, onChange]);
+    useEffect(() => {
+        if (color === undefined)
+            return;
+        const newColor = transformColor('hex', color);
+        setSelfColor(newColor);
+        setInputColor(newColor.hex);
+    }, [color]);
+    return (_jsxs(DropDown, { ...rest, disabled: disabled, stopCloseOnClickSelf: true, children: [_jsxs("div", { className: "color-picker-wrapper", style: { width: WIDTH }, ref: innerDivRef, children: [_jsx(TextInput, { label: "Hex", onChange: onSetHex, value: inputColor }), _jsx("div", { className: "color-picker-basic-color", children: basicColors.map((basicColor) => (_jsx("button", { className: basicColor === selfColor.hex ? ' active' : '', style: { backgroundColor: basicColor }, onClick: () => {
+                                setInputColor(basicColor);
+                                setSelfColor(transformColor('hex', basicColor));
+                            } }, basicColor))) }), _jsx(MoveWrapper, { className: "color-picker-saturation", style: { backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)` }, onChange: onMoveSaturation, children: _jsx("div", { className: "color-picker-saturation_cursor", style: {
+                                backgroundColor: selfColor.hex,
+                                left: saturationPosition.x,
+                                top: saturationPosition.y,
+                            } }) }), _jsx(MoveWrapper, { className: "color-picker-hue", onChange: onMoveHue, children: _jsx("div", { className: "color-picker-hue_cursor", style: {
+                                backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
+                                left: huePosition.x,
+                            } }) }), _jsx("div", { className: "color-picker-color", style: { backgroundColor: selfColor.hex } })] }), children] }));
+}
+function MoveWrapper({ className, style, onChange, children }) {
+    const divRef = useRef(null);
+    const move = (e) => {
+        if (divRef.current) {
+            const { current: div } = divRef;
+            const { width, height, left, top } = div.getBoundingClientRect();
+            const x = clamp(e.clientX - left, width, 0);
+            const y = clamp(e.clientY - top, height, 0);
+            onChange({ x, y });
+        }
+    };
+    const onMouseDown = (e) => {
+        if (e.button !== 0)
+            return;
+        move(e);
+        const onMouseMove = (_e) => {
+            move(_e);
+        };
+        const onMouseUp = (_e) => {
+            document.removeEventListener('mousemove', onMouseMove, false);
+            document.removeEventListener('mouseup', onMouseUp, false);
+            move(_e);
+        };
+        document.addEventListener('mousemove', onMouseMove, false);
+        document.addEventListener('mouseup', onMouseUp, false);
+    };
+    return (_jsx("div", { ref: divRef, className: className, style: style, onMouseDown: onMouseDown, children: children }));
+}
+function clamp(value, max, min) {
+    return value > max ? max : value < min ? min : value;
+}
+export function toHex(value) {
+    if (!value.startsWith('#')) {
+        const ctx = document.createElement('canvas').getContext('2d');
+        if (!ctx) {
+            throw new Error('2d context not supported or canvas already initialized');
+        }
+        ctx.fillStyle = value;
+        return ctx.fillStyle;
+    }
+    if (value.length === 4 || value.length === 5) {
+        value = value
+            .split('')
+            .map((v, i) => (i ? v + v : '#'))
+            .join('');
+        return value;
+    }
+    if (value.length === 7 || value.length === 9) {
+        return value;
+    }
+    return '#000000';
+}
+function hex2rgb(hex) {
+    const rbgArr = (hex
+        .replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => `#${r}${r}${g}${g}${b}${b}`)
+        .substring(1)
+        .match(/.{2}/g) || []).map((x) => parseInt(x, 16));
+    return {
+        b: rbgArr[2],
+        g: rbgArr[1],
+        r: rbgArr[0],
+    };
+}
+function rgb2hsv({ r, g, b }) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const max = Math.max(r, g, b);
+    const d = max - Math.min(r, g, b);
+    const h = d ? (max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? 2 + (b - r) / d : 4 + (r - g) / d) * 60 : 0;
+    const s = max ? (d / max) * 100 : 0;
+    const v = max * 100;
+    return { h, s, v };
+}
+function hsv2rgb({ h, s, v }) {
+    s /= 100;
+    v /= 100;
+    const i = ~~(h / 60);
+    const f = h / 60 - i;
+    const p = v * (1 - s);
+    const q = v * (1 - s * f);
+    const t = v * (1 - s * (1 - f));
+    const index = i % 6;
+    const r = Math.round([v, q, p, p, t, v][index] * 255);
+    const g = Math.round([t, v, v, q, p, p][index] * 255);
+    const b = Math.round([p, p, t, v, v, q][index] * 255);
+    return { b, g, r };
+}
+function rgb2hex({ b, g, r }) {
+    return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
+}
+function transformColor(format, color) {
+    let hex = toHex('#121212');
+    let rgb = hex2rgb(hex);
+    let hsv = rgb2hsv(rgb);
+    if (format === 'hex') {
+        const value = color;
+        hex = toHex(value);
+        rgb = hex2rgb(hex);
+        hsv = rgb2hsv(rgb);
+    }
+    else if (format === 'rgb') {
+        const value = color;
+        rgb = value;
+        hex = rgb2hex(rgb);
+        hsv = rgb2hsv(rgb);
+    }
+    else if (format === 'hsv') {
+        const value = color;
+        hsv = value;
+        rgb = hsv2rgb(hsv);
+        hex = rgb2hex(rgb);
+    }
+    return { hex, hsv, rgb };
+}

package/lib/main/ui/ContentEditable.d.ts

@@ -0,0 +1,2 @@
+import { ContentEditableProps } from '@lexical/react/LexicalContentEditable';
+export default function ContentEditable(props: ContentEditableProps): import("react/jsx-runtime").JSX.Element;

package/lib/main/ui/ContentEditable.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from '@emotion/styled';
+import { ContentEditable as LexicalContentEditable } from '@lexical/react/LexicalContentEditable';
+export default function ContentEditable(props) {
+    return _jsx(ContentEditableRoot, { ...props });
+}
+const ContentEditableRoot = styled(LexicalContentEditable) `
+  border: 0;
+  font-size: 16px;
+  display: block;
+  position: relative;
+  tab-size: 1;
+  outline: 0;
+  overflow: hidden;
+`;

package/lib/main/ui/Dialog.css

@@ -0,0 +1,17 @@
+.DialogActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.DialogButtonsList {
+  display: flex;
+  flex-direction: column;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.DialogButtonsList button {
+  margin-bottom: 20px;
+}

package/lib/main/ui/Dialog.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Dialog.css';
+import { ReactNode, type JSX } from 'react';
+type Props = Readonly<{
+    'data-test-id'?: string;
+    children: ReactNode;
+}>;
+export declare function DialogButtonsList({ children }: Props): JSX.Element;
+export declare function DialogActions({ 'data-test-id': dataTestId, children }: Props): JSX.Element;
+export {};

package/lib/main/ui/Dialog.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import './Dialog.css';
+export function DialogButtonsList({ children }) {
+    return _jsx("div", { className: "DialogButtonsList", children: children });
+}
+export function DialogActions({ 'data-test-id': dataTestId, children }) {
+    return (_jsx("div", { className: "DialogActions", "data-test-id": dataTestId, children: children }));
+}