github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: removed repetitive css styles and removed header row by default

Browse Source 
- fixed css
- removed header row to render by default
- added row and column header toggle options
This commit is contained in:
Palanikannan1437 2024-01-06 10:22:27 +05:30
parent bb4bee00cb
commit 44dc602ac3
10 changed files with 100 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/editor/core/src/lib/editor-commands.ts
View File

@ -73,8 +73,8 @@ export const insertTableCommand = (editor: Editor, range?: Range) => {
} }
} }
} }
if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); if (range) editor.chain().focus().deleteRange(range).insertTable({ rows: 3, cols: 3 }).run();
else editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run(); else editor.chain().focus().insertTable({ rows: 3, cols: 3 }).run();
}; };
export const unsetLinkEditor = (editor: Editor) => { export const unsetLinkEditor = (editor: Editor) => {

122
packages/editor/core/src/styles/editor.css
View File

@ -170,67 +170,67 @@ ul[data-type="taskList"] li[data-checked="true"] > div > p {
} }
} }
#editor-container { /* #editor-container { */
table { /* table { */
border-collapse: collapse; /* border-collapse: collapse; */
table-layout: fixed; /* table-layout: fixed; */
margin: 0.5em 0 0.5em 0; /* margin: 0.5em 0 0.5em 0; */
/**/
border: 1px solid rgb(var(--color-border-200)); /* border: 1px solid rgb(var(--color-border-200)); */
width: 100%; /* width: 100%; */
/**/
td, /* td, */
th { /* th { */
min-width: 1em; /* min-width: 1em; */
border: 1px solid rgb(var(--color-border-200)); /* border: 1px solid rgb(var(--color-border-200)); */
padding: 10px 15px; /* padding: 10px 15px; */
vertical-align: top; /* vertical-align: top; */
box-sizing: border-box; /* box-sizing: border-box; */
position: relative; /* position: relative; */
transition: background-color 0.3s ease; /* transition: background-color 0.3s ease; */
/**/
> * { /* > * { */
margin-bottom: 0; /* margin-bottom: 0; */
} /* } */
} /* } */
/**/
th { /* th { */
font-weight: bold; /* font-weight: bold; */
text-align: left; /* text-align: left; */
background-color: rgb(var(--color-primary-100)); /* background-color: rgb(var(--color-primary-100)); */
} /* } */
/**/
td:hover { /* td:hover { */
background-color: rgba(var(--color-primary-300), 0.1); /* background-color: rgba(var(--color-primary-300), 0.1); */
} /* } */
/**/
.selectedCell:after { /* .selectedCell:after { */
z-index: 2; /* z-index: 2; */
position: absolute; /* position: absolute; */
content: ""; /* content: ""; */
left: 0; /* left: 0; */
right: 0; /* right: 0; */
top: 0; /* top: 0; */
bottom: 0; /* bottom: 0; */
background-color: rgba(var(--color-primary-300), 0.1); /* background-color: rgba(var(--color-primary-300), 0.1); */
pointer-events: none; /* pointer-events: none; */
} /* } */
/**/
.column-resize-handle { /* .column-resize-handle { */
position: absolute; /* position: absolute; */
right: -2px; /* right: -2px; */
top: 0; /* top: 0; */
bottom: -2px; /* bottom: -2px; */
width: 2px; /* width: 2px; */
background-color: rgb(var(--color-primary-400)); /* background-color: rgb(var(--color-primary-400)); */
pointer-events: none; /* pointer-events: none; */
} /* } */
} /* } */
} /* } */
/**/
.tableWrapper { /* .tableWrapper { */
overflow-x: auto; /* overflow-x: auto; */
} /* } */
.resize-cursor { .resize-cursor {
cursor: ew-resize; cursor: ew-resize;

13
packages/editor/core/src/styles/table.css
View File

@ -9,8 +9,8 @@
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
margin: 0; margin: 0;
margin-bottom: 3rem; margin-bottom: 1rem;
border: 1px solid rgba(var(--color-border-200)); border: 2px solid rgba(var(--color-border-200));
width: 100%; width: 100%;
} }
@ -118,9 +118,7 @@
background-size: 1.25rem; background-size: 1.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: transition: transform ease-out 100ms, background-color ease-out 100ms;
transform ease-out 100ms,
background-color ease-out 100ms;
outline: none; outline: none;
box-shadow: #000 0px 2px 4px; box-shadow: #000 0px 2px 4px;
cursor: pointer; cursor: pointer;
@ -133,13 +131,12 @@
background-size: 1.25rem; background-size: 1.25rem;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
transition: transition: transform ease-out 100ms, background-color ease-out 100ms;
transform ease-out 100ms,
background-color ease-out 100ms;
outline: none; outline: none;
box-shadow: #000 0px 2px 4px; box-shadow: #000 0px 2px 4px;
cursor: pointer; cursor: pointer;
} }
.tableWrapper .tableControls .tableToolbox, .tableWrapper .tableControls .tableToolbox,
.tableWrapper .tableControls .tableColorPickerToolbox { .tableWrapper .tableControls .tableColorPickerToolbox {
border: 1px solid rgba(var(--color-border-300)); border: 1px solid rgba(var(--color-border-300));

2
packages/editor/core/src/ui/extensions/table/table-cell/table-cell.ts
View File

@ -13,7 +13,7 @@ export const TableCell = Node.create<TableCellOptions>({
}; };
}, },
content: "paragraph+", content: "block+",
addAttributes() { addAttributes() {
return { return {

37
packages/editor/core/src/ui/extensions/table/table/table-view.tsx
View File

@ -1,5 +1,6 @@
import { h } from "jsx-dom-cjs"; import { h } from "jsx-dom-cjs";
import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model"; import { Node as ProseMirrorNode, ResolvedPos } from "@tiptap/pm/model";
// import { setCellAttr } from "prosemirror-tables";
import { Decoration, NodeView } from "@tiptap/pm/view"; import { Decoration, NodeView } from "@tiptap/pm/view";
import tippy, { Instance, Props } from "tippy.js"; import tippy, { Instance, Props } from "tippy.js";
@ -82,19 +83,30 @@ const defaultTippyOptions: Partial<Props> = {
}; };
function setCellsBackgroundColor(editor: Editor, backgroundColor: string) { function setCellsBackgroundColor(editor: Editor, backgroundColor: string) {
return editor const curr_color = editor.getAttributes("tableCell").background;
.chain() // __AUTO_GENERATED_PRINT_VAR_START__
.focus() console.log("setCellsBackgroundColor curr_color: %s", curr_color); // __AUTO_GENERATED_PRINT_VAR_END__
.updateAttributes("tableCell", { return (
background: backgroundColor, editor
}) .chain()
.updateAttributes("tableHeader", { .focus()
background: backgroundColor, // .setCellAttribute("backgroundColor", backgroundColor)
}) .updateAttributes("tableCell", {
.run(); background: backgroundColor,
})
.updateAttributes("tableHeader", {
background: backgroundColor,
})
.run()
);
} }
const columnsToolboxItems: ToolboxItem[] = [ const columnsToolboxItems: ToolboxItem[] = [
{
label: "Toggle Column Header",
icon: icons.insertBottomTableIcon,
action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderColumn().run(),
},
{ {
label: "Add Column Before", label: "Add Column Before",
icon: icons.insertLeftTableIcon, icon: icons.insertLeftTableIcon,
@ -134,6 +146,11 @@ const columnsToolboxItems: ToolboxItem[] = [
]; ];
const rowsToolboxItems: ToolboxItem[] = [ const rowsToolboxItems: ToolboxItem[] = [
{
label: "Toggle Row Header",
icon: icons.insertBottomTableIcon,
action: ({ editor }: { editor: Editor }) => editor.chain().focus().toggleHeaderRow().run(),
},
{ {
label: "Add Row Above", label: "Add Row Above",
icon: icons.insertTopTableIcon, icon: icons.insertTopTableIcon,

2
packages/editor/core/src/ui/extensions/table/table/table.ts
View File

@ -107,7 +107,7 @@ export const Table = Node.create({
addCommands() { addCommands() {
return { return {
insertTable: insertTable:
({ rows = 3, cols = 3, withHeaderRow = true } = {}) => ({ rows = 3, cols = 3, withHeaderRow = false } = {}) =>
({ tr, dispatch, editor }) => { ({ tr, dispatch, editor }) => {
const node = createTable(editor.schema, rows, cols, withHeaderRow); const node = createTable(editor.schema, rows, cols, withHeaderRow);

9
packages/editor/core/src/ui/props.tsx
View File

@ -42,15 +42,6 @@ export function CoreEditorProps(
return false; return false;
}, },
handleDrop: (view, event, _slice, moved) => { handleDrop: (view, event, _slice, moved) => {
if (typeof window !== "undefined") {
const selection: any = window?.getSelection();
if (selection.rangeCount !== 0) {
const range = selection.getRangeAt(0);
if (findTableAncestor(range.startContainer)) {
return;
}
}
}
if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) { if (!moved && event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files[0]) {
event.preventDefault(); event.preventDefault();
const file = event.dataTransfer.files[0]; const file = event.dataTransfer.files[0];

23
packages/editor/document-editor/src/ui/menu/fixed-menu.tsx
View File

@ -48,34 +48,13 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
function getComplexItems(): BubbleMenuItem[] { function getComplexItems(): BubbleMenuItem[] {
const items: BubbleMenuItem[] = [TableItem(editor)]; const items: BubbleMenuItem[] = [TableItem(editor)];
if (shouldShowImageItem()) { items.push(ImageItem(editor, uploadFile, setIsSubmitting));
items.push(ImageItem(editor, uploadFile, setIsSubmitting));
}
return items; return items;
} }
const complexItems: BubbleMenuItem[] = getComplexItems(); const complexItems: BubbleMenuItem[] = getComplexItems();
function shouldShowImageItem(): boolean {
if (typeof window !== "undefined") {
const selectionRange: any = window?.getSelection();
const { selection } = props.editor.state;
if (selectionRange.rangeCount !== 0) {
const range = selectionRange.getRangeAt(0);
if (findTableAncestor(range.startContainer)) {
return false;
}
if (isCellSelection(selection)) {
return false;
}
}
return true;
}
return false;
}
return ( return (
<div className="flex items-center divide-x divide-custom-border-200"> <div className="flex items-center divide-x divide-custom-border-200">
<div className="flex items-center gap-0.5 pr-2"> <div className="flex items-center gap-0.5 pr-2">

25
packages/editor/lite-text-editor/src/ui/menus/fixed-menu/index.tsx
View File

@ -59,35 +59,12 @@ export const FixedMenu = (props: EditorBubbleMenuProps) => {
function getComplexItems(): BubbleMenuItem[] { function getComplexItems(): BubbleMenuItem[] {
const items: BubbleMenuItem[] = [TableItem(props.editor)]; const items: BubbleMenuItem[] = [TableItem(props.editor)];
items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting));
if (shouldShowImageItem()) {
items.push(ImageItem(props.editor, props.uploadFile, props.setIsSubmitting));
}
return items; return items;
} }
const complexItems: BubbleMenuItem[] = getComplexItems(); const complexItems: BubbleMenuItem[] = getComplexItems();
function shouldShowImageItem(): boolean {
if (typeof window !== "undefined") {
const selectionRange: any = window?.getSelection();
const { selection } = props.editor.state;
if (selectionRange.rangeCount !== 0) {
const range = selectionRange.getRangeAt(0);
if (findTableAncestor(range.startContainer)) {
return false;
}
if (isCellSelection(selection)) {
return false;
}
}
return true;
}
return false;
}
const handleAccessChange = (accessKey: string) => { const handleAccessChange = (accessKey: string) => {
props.commentAccessSpecifier?.onAccessChange(accessKey); props.commentAccessSpecifier?.onAccessChange(accessKey);
}; };

2
yarn.lock
View File

@ -2786,7 +2786,7 @@
dependencies: dependencies:
"@types/react" "*" "@types/react" "*"
"@types/react@*", "@types/react@^18.2.42": "@types/react@*", "@types/react@18.2.42", "@types/react@^18.2.42":
version "18.2.42" version "18.2.42"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.42.tgz#6f6b11a904f6d96dda3c2920328a97011a00aba7"
integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA== integrity sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==