Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-22 21:01:09 +10:00
Code Issues Packages Projects Releases Wiki Activity

editor improvements

Browse Source 
* add callout, youtube embed, image, video, table, detail, math
* fix attachments module
* other fixes
This commit is contained in:
Philipinho
2024-06-20 14:57:00 +01:00
parent c7925739cb
commit 1f4bd129a8
74 changed files with 5205 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
apps/client/src/features/editor/styles/code.css Normal file
View File

@ -0,0 +1,89 @@
.ProseMirror {
pre {
padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
border-radius: var(--mantine-radius-default);
@mixin light {
background-color: var(--mantine-color-gray-0);
color: var(--mantine-color-gray-9);
}
@mixin dark {
background-color: var(--mantine-color-dark-8);
color: var(--mantine-color-dark-1);
}
code {
color: inherit;
padding: 0;
background: none;
font-size: inherit;
}
/* Code styling */
.hljs-comment,
.hljs-quote {
color: light-dark(
var(--mantine-color-gray-5),
var(--mantine-color-dark-2)
);
}
.hljs-variable,
.hljs-template-variable,
.hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-regexp,
.hljs-link,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
}
.hljs-number,
.hljs-meta,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params {
color: light-dark(
var(--mantine-color-blue-7),
var(--mantine-color-cyan-5)
);
}
.hljs-string,
.hljs-symbol,
.hljs-bullet {
color: light-dark(var(--mantine-color-red-7), var(--mantine-color-red-5));
}
.hljs-title,
.hljs-section {
color: light-dark(
var(--mantine-color-pink-7),
var(--mantine-color-yellow-5)
);
}
.hljs-keyword,
.hljs-selector-tag {
color: light-dark(
var(--mantine-color-violet-7),
var(--mantine-color-violet-3)
);
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: 700;
}
}
}

211
apps/client/src/features/editor/styles/core.css
View File

@ -1,110 +1,133 @@
.ProseMirror {
background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-7));
color: light-dark(var(--mantine-color-default-color), var(--mantine-color-dark-0));
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height-md);
font-weight: 400;
width: 100%;
background-color: light-dark(
var(--mantine-color-white),
var(--mantine-color-dark-7)
);
color: light-dark(
var(--mantine-color-default-color),
var(--mantine-color-dark-0)
);
font-size: var(--mantine-font-size-md);
line-height: var(--mantine-line-height-xl);
font-weight: 400;
width: 100%;
> * + * {
margin-top: 0.75em;
{
margin-top: 0.75em;
}
&:focus {
outline: none;
}
ul,
ol {
padding: 0 1rem;
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-dark-8)
);
color: #616161;
}
a {
color: light-dark(#207af1, #587da9);
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
blockquote {
padding-left: 25px;
padding-right: 25px;
border-left: 2px solid var(--mantine-color-gray-6);
background-color: light-dark(
var(--mantine-color-gray-0),
var(--mantine-color-dark-8)
);
margin: 0;
}
hr {
border: none;
border-top: 2px solid #ced4da;
margin: 2rem 0;
&:hover {
cursor: pointer;
}
}
&:focus {
outline: none;
hr.ProseMirror-selectednode {
border-top: 1px solid #68cef8;
}
.ProseMirror-selectednode {
outline: 2px solid #70cff8;
}
.node-mathInline {
.katex-display {
margin: 0;
}
}
ul,
ol {
padding: 0 1rem;
margin-top: .25rem;
margin-bottom: .25rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1.1;
}
code {
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
color: #616161;
}
pre {
padding: var(--mantine-spacing-xs);
margin: var(--mantine-spacing-md) 0;
font-family: var(--mantine-font-family-monospace);
border-radius: var(--mantine-radius-sm);
@mixin light {
background-color: var(--mantine-color-gray-0);
color: var(--mantine-color-black);
.react-renderer {
&.node-callout {
padding-top: var(--mantine-spacing-xs);
padding-bottom: var(--mantine-spacing-xs);
div[style*="white-space: inherit;"] {
> :first-child {
margin: 0;
}
@mixin dark {
background-color: var(--mantine-color-dark-8);
color: var(--mantine-color-white);
}
code {
color: inherit;
padding: 0;
background: none;
font-size: inherit;
}
}
img {
max-width: 100%;
height: auto;
}
a {
color: light-dark(#207af1, #587da9);
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
blockquote {
padding-left: 25px;
border-left: 2px solid var(--mantine-color-gray-6);
background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-8));
margin: 0;
}
hr {
border: none;
border-top: 2px solid #ced4da;
margin: 2rem 0;
&:hover {
cursor: pointer;
}
}
hr.ProseMirror-selectednode {
border-top: 1px solid #68CEF8;
}
.ProseMirror-selectednode {
outline: 2px solid #70CFF8;
}
}
}
}
.resize-cursor {
cursor: ew-resize;
cursor: col-resize;
cursor: ew-resize;
cursor: col-resize;
}
.comment-mark {
background: rgba(255, 215, 0, .14);
border-bottom: 2px solid rgb(166, 158, 12);
background: rgba(255, 215, 0, 0.14);
border-bottom: 2px solid rgb(166, 158, 12);
}
.ProseMirror-icon {
display: inline-block;
width: 1em;
height: 1em;
mask-image: var(--svg);
mask-repeat: no-repeat;
mask-size: 100% 100%;
background-color: currentColor;
& -open {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M10 3v2H5v14h14v-5h2v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm7.586 2H13V3h8v8h-2V6.414l-7 7L10.586 12z'/%3E%3C/svg%3E");
}
&-right-line {
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.172 12L9.343 9.173l1.415-1.414L15 12l-4.242 4.242l-1.415-1.414z'/%3E%3C/svg%3E");
}
}
.actionIconGroup {
background: var(--mantine-color-body);
}

77
apps/client/src/features/editor/styles/details.css Normal file
View File

@ -0,0 +1,77 @@
.ProseMirror {
[data-type="details"] {
display: flex;
padding: 0.5em;
border-radius: 4px;
border: 1px solid transparent;
transition: border 0.3s;
width: 100%;
&:hover {
border: 1px solid
light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7));
[data-type="detailsSummary"] {}
}
[data-type="detailsButton"] {
display: flex;
cursor: pointer;
border: none;
padding: 0;
background: transparent;
.ProseMirror-icon {
width: 2em;
height: 2em;
transform: rotateZ(0deg);
transition: transform 0.3s;
}
> div {
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
&:hover,
&.active {
color: light-dark(
var(--mantine-color-gray-8),
var(--mantine-color-gray-0)
);
background: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-gray-8)
);
}
}
}
[data-type="detailsContainer"] {
flex: 1;
margin-left: 0.2em;
overflow-x: hidden;
word-break: break-word;
overflow-wrap: break-word;
[data-type="detailsContent"] {
display: none;
}
}
&[open] {
[data-type="detailsButton"] {
.ProseMirror-icon {
transform: rotateZ(90deg);
}
}
[data-type="detailsContainer"] {
[data-type="detailsContent"] {
display: block;
}
}
}
}
}

4
apps/client/src/features/editor/styles/drag-handle.css
View File

@ -1,9 +1,9 @@
.ProseMirror:not(.dragging) .ProseMirror-selectednode {
/*.ProseMirror:not(.dragging) .ProseMirror-selectednode {
outline: none !important;
background-color: rgba(150, 170, 220, 0.2);
transition: background-color 0.2s;
box-shadow: none;
}
}*/
.drag-handle {
position: fixed;

17
apps/client/src/features/editor/styles/index.css
View File

@ -1,5 +1,12 @@
@import './core';
@import './collaboration';
@import './task-list';
@import './placeholder';
@import './drag-handle';
@import "./core.css";
@import "./collaboration.css";
@import "./task-list.css";
@import "./placeholder.css";
@import "./drag-handle.css";
@import "./details.css";
@import "./table.css";
@import "./youtube.css";
@import "./media.css";
@import "./code.css";

13
apps/client/src/features/editor/styles/media.css Normal file
View File

@ -0,0 +1,13 @@
.ProseMirror {
img {
max-width: 100%;
height: auto;
}
.node-image, .node-video {
&.ProseMirror-selectednode {
outline: none;
}
}
}

73
apps/client/src/features/editor/styles/table.css Normal file
View File

@ -0,0 +1,73 @@
.tableWrapper {
margin-top: 3rem;
margin-bottom: 3rem;
overflow-x: auto;
& table {
overflow-x: hidden;
}
}
.ProseMirror {
table {
border-collapse: collapse;
margin: 0;
table-layout: fixed;
width: 100%;
td,
th {
border: 1px solid #ced4da;
box-sizing: border-box;
min-width: 1em;
padding: 3px 5px;
position: relative;
vertical-align: top;
&:first-of-type:not(a) {
margin-top: 0;
}
p {
margin: 0;
& + p {
margin-top: 0.75rem;
}
}
}
th {
background-color: light-dark(
var(--mantine-color-gray-1),
var(--mantine-color-dark-5)
);
font-weight: bold;
text-align: left;
}
.column-resize-handle {
background-color: #adf;
bottom: -2px;
position: absolute;
right: -2px;
pointer-events: none;
top: 0;
width: 4px;
}
.selectedCell:after {
background: rgba(200, 200, 255, 0.4);
content: "";
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
position: absolute;
z-index: 2;
}
}
}

21
apps/client/src/features/editor/styles/youtube.css Normal file
View File

@ -0,0 +1,21 @@
.ProseMirror {
div[data-youtube-video] {
cursor: move;
iframe {
display: block;
outline: 0px solid transparent;
border-radius: var(--mantine-radius-md);
width: 100%;
}
&.ProseMirror-selectednode iframe {
outline: 1px solid var(--mantine-color-blue-6);
transition: outline 0.15s;
}
&.ProseMirror-selectednode {
background-color: transparent;
}
}
}