✨ Notebook Add Advanced Controls (#1452)
* 💄 Reduce notebook widget min width to fit sidebar * ✨ Highlight and text align controls * ✨ Notebook Image support * ✨ Notebook text coloring support * ✨ Notebook Image resize support * ✨ Notebook Advanced Highlight and Text Coloring * ✨ TaskList and lists indentations (not finished) * ⬆️ Updated tiptap components to 2.1.12 * 🐛 notebook content not updating * ✨Cancel Edit function + 🐛onReadOnlyCheck bug fix * ✨ Notebook Table * 🚧 Tweaks * 🌐 Added Translations * 🐛 Fix notebook table column resize * 🌐 Replace common translations * ✨ Notebook Underline, default text change
This commit is contained in:
Tagaishi
@@ -89,7 +89,7 @@ export const ChangePositionModal = ({
|
||||
data={widthData}
|
||||
max={24}
|
||||
min={1}
|
||||
label={t('layout/modals/change-position:width')}
|
||||
label={t('common:attributes.width')}
|
||||
description={t('layout/modals/change-position:betweenXandY', {
|
||||
min: widthData.at(0)?.label,
|
||||
max: widthData.at(-1)?.label,
|
||||
@@ -104,7 +104,7 @@ export const ChangePositionModal = ({
|
||||
data={heightData}
|
||||
max={24}
|
||||
min={1}
|
||||
label={t('layout/modals/change-position:height')}
|
||||
label={t('common:attributes.height')}
|
||||
description={t('layout/modals/change-position:betweenXandY', {
|
||||
min: heightData.at(0)?.label,
|
||||
max: heightData.at(-1)?.label,
|
||||
|
||||
@@ -50,6 +50,7 @@ export const initializeGridstack = (
|
||||
// Add listener for moving items around in a wrapper
|
||||
grid.on('change', (_, el) => {
|
||||
const nodes = el as GridStackNode[];
|
||||
if (!nodes) return;
|
||||
const firstNode = nodes.at(0);
|
||||
if (!firstNode) return;
|
||||
events.onChange(firstNode);
|
||||
@@ -58,6 +59,7 @@ export const initializeGridstack = (
|
||||
// Add listener for moving items in config from one wrapper to another
|
||||
grid.on('added', (_, el) => {
|
||||
const nodes = el as GridStackNode[];
|
||||
if (!nodes) return;
|
||||
const firstNode = nodes.at(0);
|
||||
if (!firstNode) return;
|
||||
events.onAdd(firstNode);
|
||||
|
||||
@@ -104,4 +104,78 @@
|
||||
transparent 6px
|
||||
);
|
||||
background-size: 60px 60px;
|
||||
}
|
||||
|
||||
.tiptap {
|
||||
hr {
|
||||
border-top-style: double;
|
||||
}
|
||||
|
||||
ul[data-type="taskList"] {
|
||||
padding-left: 17px;
|
||||
li {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
&.ProseMirror-selectednode {
|
||||
outline: 3px solid rgba(0, 65, 198, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
|
||||
td {
|
||||
border-color: var(--mantine-color-gray-5) !important;
|
||||
border-width: 1px !important;
|
||||
border-style: solid !important;
|
||||
box-sizing: border-box;
|
||||
min-width: 1em;
|
||||
padding: 3px 5px;
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.selectedCell:after {
|
||||
background: rgba(200, 200, 200, 0.4);
|
||||
content: "";
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&[contenteditable="true"].resize-cursor {
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
&[contenteditable="false"].resize-cursor {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
padding: 1rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -99,8 +99,6 @@ function DnsHoleControlsWidgetTile({ widget }: DnsHoleControlsWidgetProps) {
|
||||
);
|
||||
}
|
||||
|
||||
console.log(data);
|
||||
|
||||
type getDnsStatusAcc = {
|
||||
enabled: string[];
|
||||
disabled: string[];
|
||||
|
||||
@@ -1,63 +1,193 @@
|
||||
import { ActionIcon, ScrollArea } from '@mantine/core';
|
||||
import { useDebouncedValue } from '@mantine/hooks';
|
||||
import { Link, RichTextEditor } from '@mantine/tiptap';
|
||||
import { IconEdit, IconEditOff } from '@tabler/icons-react';
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
ColorPicker,
|
||||
ColorSwatch,
|
||||
Group,
|
||||
NumberInput,
|
||||
Popover,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
TextInput,
|
||||
useMantineTheme,
|
||||
} from '@mantine/core';
|
||||
import { useDisclosure, useInputState } from '@mantine/hooks';
|
||||
import { Link, RichTextEditor, useRichTextEditorContext } from '@mantine/tiptap';
|
||||
import {
|
||||
IconCheck,
|
||||
IconCircleOff,
|
||||
IconColumnInsertLeft,
|
||||
IconColumnInsertRight,
|
||||
IconColumnRemove,
|
||||
IconDeviceFloppy,
|
||||
IconEdit,
|
||||
IconHighlight,
|
||||
IconIndentDecrease,
|
||||
IconIndentIncrease,
|
||||
IconLayoutGrid,
|
||||
IconLetterA,
|
||||
IconListCheck,
|
||||
IconPhoto,
|
||||
IconRowInsertBottom,
|
||||
IconRowInsertTop,
|
||||
IconRowRemove,
|
||||
IconTableOff,
|
||||
IconTablePlus,
|
||||
IconX,
|
||||
} from '@tabler/icons-react';
|
||||
import { Color } from '@tiptap/extension-color';
|
||||
import Highlight from '@tiptap/extension-highlight';
|
||||
import Image from '@tiptap/extension-image';
|
||||
import Table from '@tiptap/extension-table';
|
||||
import TableCell from '@tiptap/extension-table-cell';
|
||||
import TableHeader from '@tiptap/extension-table-header';
|
||||
import TableRow from '@tiptap/extension-table-row';
|
||||
import TaskItem from '@tiptap/extension-task-item';
|
||||
import TaskList from '@tiptap/extension-task-list';
|
||||
import TextAlign from '@tiptap/extension-text-align';
|
||||
import TextStyle from '@tiptap/extension-text-style';
|
||||
import Underline from '@tiptap/extension-underline';
|
||||
import { BubbleMenu, useEditor } from '@tiptap/react';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import { useState } from 'react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import { Dispatch, SetStateAction, useState } from 'react';
|
||||
import { useEditModeStore } from '~/components/Dashboard/Views/useEditModeStore';
|
||||
import { useConfigContext } from '~/config/provider';
|
||||
import { useConfigStore } from '~/config/store';
|
||||
import { useColorTheme } from '~/tools/color';
|
||||
import { api } from '~/utils/api';
|
||||
|
||||
import { WidgetLoading } from '../loading';
|
||||
import { INotebookWidget } from './NotebookWidgetTile';
|
||||
|
||||
Link.configure({
|
||||
openOnClick: true,
|
||||
});
|
||||
|
||||
export function Editor({ widget }: { widget: INotebookWidget }) {
|
||||
const [content, setContent] = useState(widget.properties.content);
|
||||
const [toSaveContent, setToSaveContent] = useState(content);
|
||||
|
||||
const { enabled } = useEditModeStore();
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
|
||||
const { config, name: configName } = useConfigContext();
|
||||
const updateConfig = useConfigStore((x) => x.updateConfig);
|
||||
const { primaryColor } = useColorTheme();
|
||||
const { primaryColor } = useMantineTheme();
|
||||
|
||||
const { mutateAsync } = api.notebook.update.useMutation();
|
||||
|
||||
const [debouncedContent] = useDebouncedValue(content, 500);
|
||||
const { t } = useTranslation(['modules/notebook', 'common']);
|
||||
|
||||
const editor = useEditor({
|
||||
extensions: [
|
||||
StarterKit,
|
||||
Link.configure({
|
||||
validate(url) {
|
||||
return /^https?:\/\//.test(url);
|
||||
},
|
||||
}),
|
||||
],
|
||||
content,
|
||||
editable: false,
|
||||
onUpdate: (e) => {
|
||||
setContent(e.editor.getHTML());
|
||||
const editor = useEditor(
|
||||
{
|
||||
extensions: [
|
||||
Color,
|
||||
Highlight.configure({ multicolor: true }),
|
||||
Image.extend({
|
||||
addAttributes() {
|
||||
return {
|
||||
...this.parent?.(),
|
||||
width: { default: null },
|
||||
};
|
||||
},
|
||||
}).configure({ inline: true }),
|
||||
Link.configure({
|
||||
openOnClick: true,
|
||||
validate(url) {
|
||||
return /^https?:\/\//.test(url);
|
||||
},
|
||||
}),
|
||||
StarterKit,
|
||||
Table.configure({
|
||||
resizable: true,
|
||||
lastColumnResizable: false,
|
||||
}),
|
||||
TableCell.extend({
|
||||
addAttributes() {
|
||||
return {
|
||||
...this.parent?.(),
|
||||
backgroundColor: {
|
||||
default: undefined,
|
||||
renderHTML: (attributes) => ({
|
||||
style: attributes.backgroundColor
|
||||
? `background-color: ${attributes.backgroundColor}`
|
||||
: undefined,
|
||||
}),
|
||||
parseHTML: (element) => element.style.backgroundColor || undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
}),
|
||||
TableHeader,
|
||||
TableRow,
|
||||
TaskItem.configure({
|
||||
nested: true,
|
||||
onReadOnlyChecked: (node, checked) => {
|
||||
if (widget.properties.allowReadOnlyCheck) {
|
||||
const event = new CustomEvent('onReadOnlyCheck', { detail: { node, checked } });
|
||||
dispatchEvent(event);
|
||||
}
|
||||
return widget.properties.allowReadOnlyCheck;
|
||||
},
|
||||
}),
|
||||
TaskList.configure({ itemTypeName: 'taskItem' }),
|
||||
TextAlign.configure({ types: ['heading', 'paragraph'] }),
|
||||
TextStyle,
|
||||
Underline,
|
||||
],
|
||||
content,
|
||||
onUpdate: (e) => {
|
||||
setContent(e.editor.getHTML());
|
||||
},
|
||||
onCreate: (e) => {
|
||||
e.editor.setEditable(false);
|
||||
},
|
||||
},
|
||||
});
|
||||
[toSaveContent]
|
||||
);
|
||||
|
||||
const handleOnReadOnlyCheck = (event: CustomEventInit) => {
|
||||
if (widget.properties.allowReadOnlyCheck && !!editor) {
|
||||
editor.state.doc.descendants((subnode, pos) => {
|
||||
if (subnode.eq(event.detail.node)) {
|
||||
const { tr } = editor.state;
|
||||
tr.setNodeMarkup(pos, undefined, {
|
||||
...event.detail.node.attrs,
|
||||
checked: event.detail.checked,
|
||||
});
|
||||
editor.view.dispatch(tr);
|
||||
setContent(editor.getHTML());
|
||||
handleConfigUpdate(editor.getHTML());
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
addEventListener('onReadOnlyCheck', handleOnReadOnlyCheck);
|
||||
|
||||
const handleEditToggle = (previous: boolean) => {
|
||||
const current = !previous;
|
||||
if (!editor) return current;
|
||||
editor.setEditable(current);
|
||||
|
||||
handleConfigUpdate(content);
|
||||
|
||||
return current;
|
||||
};
|
||||
|
||||
const handleEditCancel = () => {
|
||||
if (!editor) return false;
|
||||
editor.setEditable(false);
|
||||
|
||||
setContent(toSaveContent);
|
||||
editor.commands.setContent(toSaveContent);
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleConfigUpdate = (contentUpdate: string) => {
|
||||
setToSaveContent(contentUpdate);
|
||||
updateConfig(
|
||||
configName!,
|
||||
(previous) => {
|
||||
const currentWidget = previous.widgets.find((x) => x.id === widget.id);
|
||||
currentWidget!.properties.content = debouncedContent;
|
||||
currentWidget!.properties.content = contentUpdate;
|
||||
|
||||
return {
|
||||
...previous,
|
||||
@@ -72,11 +202,9 @@ export function Editor({ widget }: { widget: INotebookWidget }) {
|
||||
|
||||
void mutateAsync({
|
||||
configName: configName!,
|
||||
content: debouncedContent,
|
||||
content: contentUpdate,
|
||||
widgetId: widget.id,
|
||||
});
|
||||
|
||||
return current;
|
||||
};
|
||||
|
||||
if (!config || !configName) return <WidgetLoading />;
|
||||
@@ -115,63 +243,681 @@ export function Editor({ widget }: { widget: INotebookWidget }) {
|
||||
}}
|
||||
>
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Bold />
|
||||
<RichTextEditor.Italic />
|
||||
<RichTextEditor.Strikethrough />
|
||||
<RichTextEditor.ClearFormatting />
|
||||
<RichTextEditor.Code />
|
||||
<RichTextEditor.Bold title={t('card.controls.bold')!} />
|
||||
<RichTextEditor.Italic title={t('card.controls.italic')!} />
|
||||
<RichTextEditor.Strikethrough title={t('card.controls.strikethrough')!} />
|
||||
<RichTextEditor.Underline title={t('card.controls.underline')!} />
|
||||
<ColoredText />
|
||||
<ColoredHighlight />
|
||||
<RichTextEditor.Code title={t('card.controls.code')!} />
|
||||
<RichTextEditor.ClearFormatting title={t('card.controls.clear')!} />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.H1 />
|
||||
<RichTextEditor.H2 />
|
||||
<RichTextEditor.H3 />
|
||||
<RichTextEditor.H4 />
|
||||
<RichTextEditor.H1 title={t('card.controls.heading', { level: '1' })!} />
|
||||
<RichTextEditor.H2 title={t('card.controls.heading', { level: '2' })!} />
|
||||
<RichTextEditor.H3 title={t('card.controls.heading', { level: '3' })!} />
|
||||
<RichTextEditor.H4 title={t('card.controls.heading', { level: '4' })!} />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Blockquote />
|
||||
<RichTextEditor.Hr />
|
||||
<RichTextEditor.BulletList />
|
||||
<RichTextEditor.OrderedList />
|
||||
<RichTextEditor.AlignLeft
|
||||
title={t('card.controls.align', { position: t('common:position.left') })!}
|
||||
/>
|
||||
<RichTextEditor.AlignCenter
|
||||
title={t('card.controls.align', { position: t('common:position.center') })!}
|
||||
/>
|
||||
<RichTextEditor.AlignRight
|
||||
title={t('card.controls.align', { position: t('common:position.right') })!}
|
||||
/>
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Link />
|
||||
<RichTextEditor.Unlink />
|
||||
<RichTextEditor.Blockquote title={t('card.controls.blockquote')!} />
|
||||
<RichTextEditor.Hr title={t('card.controls.horizontalLine')!} />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.BulletList title={t('card.controls.bulletList')!} />
|
||||
<RichTextEditor.OrderedList title={t('card.controls.orderedList')!} />
|
||||
<TaskListToggle />
|
||||
{(editor?.isActive('taskList') ||
|
||||
editor?.isActive('bulletList') ||
|
||||
editor?.isActive('orderedList')) && (
|
||||
<>
|
||||
<ListIndentIncrease />
|
||||
<ListIndentDecrease />
|
||||
</>
|
||||
)}
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Link title={t('card.controls.link')!} />
|
||||
<RichTextEditor.Unlink title={t('card.controls.unlink')!} />
|
||||
<EmbedImage />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<TableToggle />
|
||||
{editor?.isActive('table') && (
|
||||
<>
|
||||
<ColoredCell />
|
||||
<TableToggleMerge />
|
||||
<TableAddColumnBefore />
|
||||
<TableAddColumnAfter />
|
||||
<TableRemoveColumn />
|
||||
<TableAddRowBefore />
|
||||
<TableAddRowAfter />
|
||||
<TableRemoveRow />
|
||||
</>
|
||||
)}
|
||||
</RichTextEditor.ControlsGroup>
|
||||
</RichTextEditor.Toolbar>
|
||||
{editor && (
|
||||
<BubbleMenu editor={editor}>
|
||||
<RichTextEditor.ControlsGroup>
|
||||
<RichTextEditor.Bold />
|
||||
<RichTextEditor.Italic />
|
||||
<RichTextEditor.Link />
|
||||
<RichTextEditor.Bold title={t('card.controls.bold')!} />
|
||||
<RichTextEditor.Italic title={t('card.controls.italic')!} />
|
||||
<RichTextEditor.Link title={t('card.controls.link')!} />
|
||||
</RichTextEditor.ControlsGroup>
|
||||
</BubbleMenu>
|
||||
)}
|
||||
|
||||
<ScrollArea>
|
||||
<ScrollArea mih="4rem" offsetScrollbars pl={12} pt={12}>
|
||||
<RichTextEditor.Content />
|
||||
</ScrollArea>
|
||||
</RichTextEditor>
|
||||
{!enabled && (
|
||||
<ActionIcon
|
||||
style={{
|
||||
zIndex: 1,
|
||||
}}
|
||||
top={7}
|
||||
right={7}
|
||||
pos="absolute"
|
||||
color={primaryColor}
|
||||
variant="light"
|
||||
size={30}
|
||||
radius={'md'}
|
||||
onClick={() => setIsEditing(handleEditToggle)}
|
||||
>
|
||||
{isEditing ? <IconEditOff size={20} /> : <IconEdit size={20} />}
|
||||
</ActionIcon>
|
||||
<>
|
||||
<ActionIcon
|
||||
title={isEditing ? t('common:save') : t('common:edit')}
|
||||
style={{
|
||||
zIndex: 1,
|
||||
}}
|
||||
top={7}
|
||||
right={7}
|
||||
pos="absolute"
|
||||
color={primaryColor}
|
||||
variant="light"
|
||||
size={30}
|
||||
radius={'md'}
|
||||
onClick={() => setIsEditing(handleEditToggle)}
|
||||
>
|
||||
{isEditing ? <IconDeviceFloppy size={20} /> : <IconEdit size={20} />}
|
||||
</ActionIcon>
|
||||
{isEditing && (
|
||||
<ActionIcon
|
||||
title={t('common:cancel')}
|
||||
style={{
|
||||
zIndex: 1,
|
||||
}}
|
||||
top={44}
|
||||
right={7}
|
||||
pos="absolute"
|
||||
color={primaryColor}
|
||||
variant="light"
|
||||
size={30}
|
||||
radius={'md'}
|
||||
onClick={() => setIsEditing(handleEditCancel)}
|
||||
>
|
||||
<IconX size={20} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function ColoredHighlight() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const defaultColor = 'transparent';
|
||||
const [color, setColor] = useState<string>(defaultColor);
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<ColoredControl
|
||||
color={color}
|
||||
setColor={setColor}
|
||||
hoverText={t('card.controls.colorHighlight')}
|
||||
icon={<IconHighlight stroke={1.5} size="1rem" />}
|
||||
selectionUpdate={() => {
|
||||
setColor(editor.getAttributes('highlight').color ?? defaultColor);
|
||||
}}
|
||||
onSaveHandle={() => {
|
||||
editor.chain().focus().setHighlight({ color: color }).run();
|
||||
}}
|
||||
onUnsetHandle={() => {
|
||||
editor.chain().focus().unsetHighlight().run();
|
||||
setColor(defaultColor);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ColoredText() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const { black, colors, colorScheme } = useMantineTheme();
|
||||
const defaultColor = colorScheme === 'dark' ? colors.dark[0] : black;
|
||||
const [color, setColor] = useState<string>(defaultColor);
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<ColoredControl
|
||||
color={color}
|
||||
setColor={setColor}
|
||||
hoverText={t('card.controls.colorText')}
|
||||
icon={<IconLetterA stroke={1.5} size="1rem" />}
|
||||
selectionUpdate={() => {
|
||||
setColor(editor.getAttributes('textStyle').color ?? defaultColor);
|
||||
}}
|
||||
onSaveHandle={() => {
|
||||
editor.chain().focus().setColor(color).run();
|
||||
}}
|
||||
onUnsetHandle={() => {
|
||||
editor.chain().focus().unsetColor().run();
|
||||
setColor(defaultColor);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function ColoredCell() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const defaultColor = 'transparent';
|
||||
const [color, setColor] = useState<string>(defaultColor);
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<ColoredControl
|
||||
color={color}
|
||||
setColor={setColor}
|
||||
hoverText={t('card.controls.colorCell')}
|
||||
icon={<IconLayoutGrid stroke={1.5} size="1.25rem" />}
|
||||
selectionUpdate={() => {
|
||||
setColor(editor.getAttributes('tableCell').backgroundColor ?? defaultColor);
|
||||
}}
|
||||
onSaveHandle={() => {
|
||||
editor.chain().focus().setCellAttribute('backgroundColor', color).run();
|
||||
}}
|
||||
onUnsetHandle={() => {
|
||||
editor.chain().focus().setCellAttribute('backgroundColor', undefined).run();
|
||||
setColor(defaultColor);
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
interface ColoredControlProps {
|
||||
color: string;
|
||||
setColor: Dispatch<SetStateAction<string>>;
|
||||
hoverText: string;
|
||||
icon: JSX.Element;
|
||||
selectionUpdate: () => any;
|
||||
onSaveHandle: () => any;
|
||||
onUnsetHandle: () => any;
|
||||
}
|
||||
|
||||
function ColoredControl({
|
||||
color,
|
||||
setColor,
|
||||
hoverText,
|
||||
icon,
|
||||
selectionUpdate,
|
||||
onSaveHandle,
|
||||
onUnsetHandle,
|
||||
}: ColoredControlProps) {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const { colors, colorScheme, white } = useMantineTheme();
|
||||
const [opened, { close, toggle }] = useDisclosure(false);
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
const palette = [
|
||||
'#000000',
|
||||
colors.dark[9],
|
||||
colors.dark[6],
|
||||
colors.dark[3],
|
||||
colors.dark[0],
|
||||
'#FFFFFF',
|
||||
colors.red[9],
|
||||
colors.pink[7],
|
||||
colors.grape[8],
|
||||
colors.violet[9],
|
||||
colors.indigo[9],
|
||||
colors.blue[5],
|
||||
colors.green[6],
|
||||
'#09D630',
|
||||
colors.lime[5],
|
||||
colors.yellow[5],
|
||||
'#EB8415',
|
||||
colors.orange[9],
|
||||
];
|
||||
|
||||
editor?.on('selectionUpdate', selectionUpdate);
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={opened}
|
||||
onChange={toggle}
|
||||
styles={{
|
||||
dropdown: {
|
||||
backgroundColor: colorScheme === 'dark' ? colors.dark[7] : white,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Popover.Target>
|
||||
<RichTextEditor.Control onClick={toggle} title={hoverText}>
|
||||
<Group spacing={3} px="0.2rem">
|
||||
{icon}
|
||||
<ColorSwatch size={14} color={color} />
|
||||
</Group>
|
||||
</RichTextEditor.Control>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Stack spacing={8}>
|
||||
<ColorPicker
|
||||
value={color}
|
||||
onChange={setColor}
|
||||
format="hexa"
|
||||
swatches={palette}
|
||||
swatchesPerRow={6}
|
||||
/>
|
||||
<Group position="right" spacing={8}>
|
||||
<ActionIcon title={t('common:cancel')} variant="default" onClick={close}>
|
||||
<IconX stroke={1.5} size="1rem" />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
title={t('common:apply')}
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
onSaveHandle();
|
||||
close();
|
||||
}}
|
||||
>
|
||||
<IconCheck stroke={1.5} size="1rem" />
|
||||
</ActionIcon>
|
||||
<ActionIcon
|
||||
title={t('card.modals.clearColor')}
|
||||
variant="default"
|
||||
onClick={() => {
|
||||
onUnsetHandle();
|
||||
close();
|
||||
}}
|
||||
>
|
||||
<IconCircleOff stroke={1.5} size="1rem" />
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
function EmbedImage() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const { colors, colorScheme, white } = useMantineTheme();
|
||||
const [opened, { open, close, toggle }] = useDisclosure(false);
|
||||
const [src, setSrc] = useInputState<string>('');
|
||||
const [width, setWidth] = useInputState<string>('');
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
function setImage() {
|
||||
editor.commands.insertContent({
|
||||
type: 'paragraph',
|
||||
content: [
|
||||
{
|
||||
type: 'image',
|
||||
attrs: {
|
||||
width: width,
|
||||
src: src,
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
close();
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={opened}
|
||||
onClose={() => {
|
||||
close();
|
||||
setSrc('');
|
||||
setWidth('');
|
||||
}}
|
||||
onOpen={() => {
|
||||
open();
|
||||
setSrc(editor == null ? '' : editor.getAttributes('image').src);
|
||||
setWidth(editor == null ? '' : editor.getAttributes('image').width);
|
||||
}}
|
||||
position="left"
|
||||
styles={{
|
||||
dropdown: {
|
||||
backgroundColor: colorScheme === 'dark' ? colors.dark[7] : white,
|
||||
},
|
||||
}}
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<RichTextEditor.Control
|
||||
onClick={toggle}
|
||||
title={t('card.controls.image')!}
|
||||
active={editor?.isActive('image')}
|
||||
>
|
||||
<IconPhoto stroke={1.5} size="1rem" />
|
||||
</RichTextEditor.Control>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Stack spacing={5}>
|
||||
<TextInput
|
||||
label={t('card.modals.source')}
|
||||
value={src || ''}
|
||||
onChange={setSrc}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
setImage();
|
||||
}
|
||||
}}
|
||||
placeholder="https://example.com/"
|
||||
/>
|
||||
<TextInput
|
||||
label={t('common:attributes.width')}
|
||||
value={width || ''}
|
||||
onChange={setWidth}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
setImage();
|
||||
}
|
||||
}}
|
||||
placeholder={t('card.modals.widthPlaceholder')!}
|
||||
/>
|
||||
<Button children={t('common:save')} variant="default" mt={10} mb={5} onClick={setImage} />
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
function TaskListToggle() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.checkList')!}
|
||||
onClick={() => editor.chain().focus().toggleTaskList().run()}
|
||||
active={editor?.isActive('taskList')}
|
||||
>
|
||||
<IconListCheck stroke={1.5} size="1rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function ListIndentIncrease() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const [itemType, setItemType] = useState('listItem');
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
editor?.on('selectionUpdate', ({ editor }) => {
|
||||
setItemType(editor?.isActive('taskItem') ? 'taskItem' : 'listItem');
|
||||
});
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.increaseIndent')!}
|
||||
onClick={() => editor.chain().focus().sinkListItem(itemType).run()}
|
||||
interactive={editor.can().sinkListItem(itemType)}
|
||||
>
|
||||
<IconIndentIncrease stroke={1.5} size="1rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function ListIndentDecrease() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const [itemType, setItemType] = useState('listItem');
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
editor?.on('selectionUpdate', ({ editor }) => {
|
||||
setItemType(editor?.isActive('taskItem') ? 'taskItem' : 'listItem');
|
||||
});
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.decreaseIndent')!}
|
||||
onClick={() => editor.chain().focus().liftListItem(itemType).run()}
|
||||
interactive={editor.can().liftListItem(itemType)}
|
||||
>
|
||||
<IconIndentDecrease stroke={1.5} size="1rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableAddColumnBefore() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.addColumnLeft')!}
|
||||
onClick={() => editor?.commands.addColumnBefore()}
|
||||
>
|
||||
<IconColumnInsertLeft stroke={1.5} size="1.25rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableAddColumnAfter() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.addColumnRight')!}
|
||||
onClick={() => editor?.commands.addColumnAfter()}
|
||||
>
|
||||
<IconColumnInsertRight stroke={1.5} size="1.25rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableRemoveColumn() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.deleteColumn')!}
|
||||
onClick={() => editor?.commands.deleteColumn()}
|
||||
>
|
||||
<IconColumnRemove stroke={1.5} size="1.25rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableAddRowBefore() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.addRowTop')!}
|
||||
onClick={() => editor?.commands.addRowBefore()}
|
||||
>
|
||||
<IconRowInsertTop stroke={1.5} size="1.25rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableAddRowAfter() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.addRowBelow')!}
|
||||
onClick={() => editor?.commands.addRowAfter()}
|
||||
>
|
||||
<IconRowInsertBottom stroke={1.5} size="1.25rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableRemoveRow() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.deleteRow')!}
|
||||
onClick={() => editor?.commands.deleteRow()}
|
||||
>
|
||||
<IconRowRemove stroke={1.5} size="1.25rem" />
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableToggleMerge() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
return (
|
||||
<RichTextEditor.Control
|
||||
title={t('card.controls.mergeCell')!}
|
||||
onClick={() => editor?.commands.mergeOrSplit()}
|
||||
active={editor?.getAttributes('tableCell').colspan > 1}
|
||||
>
|
||||
<svg
|
||||
height="1.25rem"
|
||||
width="1.25rem"
|
||||
strokeWidth="0.1"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{/* No existing icon from tabler, taken from https://icon-sets.iconify.design/fluent/table-cells-merge-24-regular/ */}
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M15.58 11.25H8.42l.89-1.002a.75.75 0 0 0-1.12-.996l-2 2.25a.75.75 0 0 0 0 .996l2 2.25a.75.75 0 1 0 1.12-.996l-.89-1.002h7.16l-.89 1.002a.75.75 0 0 0 1.12.996l2-2.25l.011-.012a.746.746 0 0 0-.013-.987l-1.997-2.247a.75.75 0 0 0-1.121.996l.89 1.002ZM6.25 3A3.25 3.25 0 0 0 3 6.25v11.5A3.25 3.25 0 0 0 6.25 21h11.5A3.25 3.25 0 0 0 21 17.75V6.25A3.25 3.25 0 0 0 17.75 3H6.25ZM4.5 6.25c0-.966.784-1.75 1.75-1.75h11.5c.966 0 1.75.784 1.75 1.75v.25h-15v-.25ZM4.5 8h15v8h-15V8Zm15 9.5v.25a1.75 1.75 0 0 1-1.75 1.75H6.25a1.75 1.75 0 0 1-1.75-1.75v-.25h15Z"
|
||||
/>
|
||||
</svg>
|
||||
</RichTextEditor.Control>
|
||||
);
|
||||
}
|
||||
|
||||
function TableToggle() {
|
||||
const { editor } = useRichTextEditorContext();
|
||||
const isActive = editor?.isActive('table');
|
||||
|
||||
const { colors, colorScheme, white } = useMantineTheme();
|
||||
|
||||
const [opened, { open, close, toggle }] = useDisclosure(false);
|
||||
|
||||
const defaultCols = 3;
|
||||
const [cols, setCols] = useState<number>(defaultCols);
|
||||
const defaultRows = 3;
|
||||
const [rows, setRows] = useState<number>(defaultRows);
|
||||
|
||||
const { t } = useTranslation(['modules/notebook']);
|
||||
|
||||
function InsertTable(cols: number, rows: number) {
|
||||
editor?.commands.insertTable({ rows, cols, withHeaderRow: false });
|
||||
close();
|
||||
}
|
||||
|
||||
return (
|
||||
<Popover
|
||||
opened={opened}
|
||||
onOpen={() => {
|
||||
open();
|
||||
setCols(defaultCols);
|
||||
setRows(defaultRows);
|
||||
}}
|
||||
onClose={close}
|
||||
styles={{
|
||||
dropdown: {
|
||||
backgroundColor: colorScheme === 'dark' ? colors.dark[7] : white,
|
||||
},
|
||||
}}
|
||||
trapFocus
|
||||
>
|
||||
<Popover.Target>
|
||||
<RichTextEditor.Control
|
||||
title={t(`card.controls.${isActive ? 'deleteTable' : 'addTable'}`)!}
|
||||
active={isActive}
|
||||
onClick={isActive ? () => editor.commands.deleteTable() : () => toggle()}
|
||||
>
|
||||
{isActive ? (
|
||||
<IconTableOff stroke={1.5} size="1rem" />
|
||||
) : (
|
||||
<IconTablePlus stroke={1.5} size="1rem" />
|
||||
)}
|
||||
</RichTextEditor.Control>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<Stack spacing={5}>
|
||||
<NumberInput
|
||||
label={t('card.modals.columns')}
|
||||
min={1}
|
||||
value={cols}
|
||||
onChange={(e) => {
|
||||
if (e !== '') {
|
||||
setCols(e);
|
||||
} else {
|
||||
setCols(0);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
InsertTable(cols, rows);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<NumberInput
|
||||
label={t('card.modals.rows')}
|
||||
min={1}
|
||||
value={rows}
|
||||
onChange={(e) => {
|
||||
if (e !== '') {
|
||||
setRows(e);
|
||||
} else {
|
||||
setRows(0);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
InsertTable(cols, rows);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
children={t('common:insert')}
|
||||
variant="default"
|
||||
mt={10}
|
||||
mb={5}
|
||||
onClick={() => InsertTable(cols, rows)}
|
||||
/>
|
||||
</Stack>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { IconNotes } from '@tabler/icons-react';
|
||||
import { useTranslation } from 'next-i18next';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
import { defineWidget } from '../helper';
|
||||
@@ -17,15 +16,19 @@ const definition = defineWidget({
|
||||
type: 'switch',
|
||||
defaultValue: true,
|
||||
},
|
||||
allowReadOnlyCheck: {
|
||||
type: 'switch',
|
||||
defaultValue: true,
|
||||
},
|
||||
content: {
|
||||
type: 'text',
|
||||
hide: true,
|
||||
defaultValue: `<h2>Welcome to <strong>Homarr's</strong> notebook widget</h2><p>The <code>notebook</code> widget focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. It is based on <a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/">Tiptap.dev</a> and supports all of its features:</p><ul><li><p>General text formatting: <strong>bold</strong>, <em>italic</em>, underline, <s>strike-through</s></p></li><li><p>Headings (h1-h6)</p></li><li><p>Sub and super scripts (<sup /> and <sub /> tags)</p></li><li><p>Ordered and bullet lists</p></li><li><p>Text align </p></li></ul><h3>Widget options</h3><p>This widget has two options :</p><ul><li><p>Show toolbar : Shows the toolbar when the widget is in the local edit mode.</p></li></ul>`,
|
||||
defaultValue: `<p style=\"text-align: center\"><img src=\"/imgs/logo/logo.png\" width=\"25%\"></p><h2>Welcome to <strong><span style=\"color: rgb(250, 82, 82)\">Homarr</span>'s</strong> notebook widget</h2><p>The <code>notebook</code> widget focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users, be it markdown or office type editors. It is based on <a target=\"_blank\" rel=\"noopener noreferrer nofollow\" href=\"https://tiptap.dev/\">Tiptap.dev</a> and supports most of its features:</p><table><tbody><tr><td colspan=\"3\" rowspan=\"1\" style=\"background-color: rgba(95, 95, 95, 0.5)\"><h4 style=\"text-align: center\">General text formatting</h4></td></tr><tr><td colspan=\"1\" rowspan=\"1\"><p><strong>Bold</strong></p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: center\"><em>Italic</em></p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: right\"><u>Underline</u></p></td></tr><tr><td colspan=\"1\" rowspan=\"1\"><p><s>Strike-through</s></p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: center\">Text alignment</p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: right\">Headings</p></td></tr></tbody></table><table><tbody><tr><td colspan=\"3\" rowspan=\"1\" style=\"background-color: rgba(95, 95, 95, 0.5)\"><h4 style=\"text-align: center\">Lists</h4></td></tr><tr><td colspan=\"1\" rowspan=\"1\"><ol><li><p>Ordered</p></li></ol></td><td colspan=\"1\" rowspan=\"1\"><ul><li><p>Bullet</p></li></ul></td><td colspan=\"1\" rowspan=\"1\"><ul data-type=\"taskList\"><li data-checked=\"true\" data-type=\"taskItem\"><label><input type=\"checkbox\" checked=\"checked\"><span></span></label><div><p>Check</p></div></li></ul></td></tr></tbody></table><table><tbody><tr><td colspan=\"3\" rowspan=\"1\" style=\"background-color: rgba(95, 95, 95, 0.5)\"><h4 style=\"text-align: center\">Coloring</h4></td></tr><tr><td colspan=\"1\" rowspan=\"1\"><p><span style=\"color: rgb(250, 82, 82)\">Text coloring</span></p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: center\"><mark data-color=\"#FA5252\" style=\"background-color: #FA5252; color: inherit\">highlighting</mark></p></td><td colspan=\"1\" rowspan=\"1\" style=\"background-color: rgb(250, 82, 82)\"><p style=\"text-align: right\">Table cells</p></td></tr></tbody></table><table><tbody><tr><td colspan=\"3\" rowspan=\"1\" style=\"background-color: rgba(95, 95, 95, 0.5)\"><h4 style=\"text-align: center\">Inserts</h4></td></tr><tr><td colspan=\"1\" rowspan=\"1\"><p>Links</p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: center\">Images</p></td><td colspan=\"1\" rowspan=\"1\"><p style=\"text-align: right\">Tables</p></td></tr></tbody></table><hr><blockquote><h4>Widget options</h4><ul><li><p>Show the toolbar to help you write markdown:</p><p>The toolbar at the top that helps with controls, some not available in markdown.</p></li><li><p>Allow check in read only mode:</p><p>Check boxes usable outside of editing, also allows anonymous checks.</p></li></ul></blockquote>`,
|
||||
},
|
||||
},
|
||||
gridstack: {
|
||||
minWidth: 3,
|
||||
minHeight: 2,
|
||||
minWidth: 2,
|
||||
minHeight: 1,
|
||||
maxWidth: 12,
|
||||
maxHeight: 12,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user