bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use correct styles for WYSIWYG editor

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-05-23 17:53:23 +02:00
parent 8cff66736d
commit 8ea94e548b
4 changed files with 134 additions and 130 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

129
src/components/markup.css
View file

@ -1,129 +0,0 @@
[data-markup] {
@apply whitespace-pre-wrap;
}
[data-markup] h1 {
@apply text-3xl font-semibold;
}
[data-markup] h2 {
@apply text-2xl font-semibold;
}
[data-markup] h3 {
@apply text-xl font-black;
}
[data-markup] p {
@apply mb-4 whitespace-pre-wrap;
}
[data-markup] p:last-child {
@apply mb-0;
}
[data-markup] a {
@apply text-primary-600 dark:text-accent-blue hover:underline;
}
[data-markup] strong {
@apply font-bold;
}
[data-markup] em {
@apply italic;
}
[data-markup] ul,
[data-markup] ol {
@apply pl-10 mb-4;
}
[data-markup] ul {
@apply list-disc list-outside;
}
[data-markup] ol {
@apply list-decimal list-outside;
}
[data-markup] blockquote {
@apply py-1 pl-4 mb-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
}
[data-markup] table {
@apply table-auto w-full bg-gray-200 dark:bg-gray-900 my-4 rounded-md;
}
[data-markup] table th, table td {
@apply text-center px-2;
}
[data-markup] table th {
@apply border-b-2 border-gray-600;
}
[data-markup] code,
[data-markup] pre {
@apply cursor-text font-mono;
}
[data-markup] p > code,
[data-markup] pre {
@apply bg-gray-100 dark:bg-primary-800;
}
/* Inline code */
[data-markup] p > code {
@apply py-0.5 px-1 rounded-sm;
}
/* Code block */
[data-markup] pre {
@apply py-2 px-3 mb-4 leading-6 overflow-x-auto rounded-md break-all;
}
[data-markup] pre:last-child {
@apply mb-0;
}
/* Emojis */
[data-markup] img.emojione {
@apply w-5 h-5 m-0;
}
/* Markdown inline images (Pleroma) */
[data-markup] img:not(.emojione) {
@apply max-h-[500px] mx-auto rounded-sm;
}
/* User setting to underline links */
body.underline-links [data-markup] a {
@apply underline;
}
[data-markup].big-emoji img.emojione {
@apply inline w-9 h-9 p-1;
}
[data-markup] .status-link {
@apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
}
[data-markup] .invisible {
font-size: 0 !important;
line-height: 0 !important;
display: inline-block;
width: 0;
height: 0;
position: absolute;
}
[data-markup] .invisible img,
[data-markup] .invisible svg {
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
width: 0 !important;
height: 0 !important;
}

1
src/components/markup.tsx
View file

@ -1,7 +1,6 @@
import React from 'react';
import Text, { IText } from './ui/text/text';
import './markup.css';
interface IMarkup extends IText {
}

1
src/styles/application.scss
View file

@ -3,6 +3,7 @@
@import 'ui';
@import 'emoji-picker';
@import 'accessibility';
@import 'markup';
// COMPONENTS
@import 'components/modal';

133
src/styles/markup.scss Normal file
View file

@ -0,0 +1,133 @@
[data-markup], [data-lexical-editor] {
@apply whitespace-pre-wrap;
h1 {
@apply text-3xl font-semibold;
}
h2 {
@apply text-2xl font-semibold;
}
h3 {
@apply text-xl font-black;
}
p {
@apply mb-4 whitespace-pre-wrap;
}
p:last-child {
@apply mb-0;
}
a {
@apply text-primary-600 dark:text-accent-blue hover:underline;
}
strong {
@apply font-bold;
}
em {
@apply italic;
}
ul,
ol {
@apply pl-10 mb-4;
}
ul {
@apply list-disc list-outside;
}
ol {
@apply list-decimal list-outside;
}
blockquote {
@apply py-1 pl-4 mb-4 border-l-4 border-solid border-gray-400 text-gray-500 dark:text-gray-400;
}
table {
@apply table-auto w-full bg-gray-200 dark:bg-gray-900 my-4 rounded-md;
}
table th, table td {
@apply text-center px-2;
}
table th {
@apply border-b-2 border-gray-600;
}
code,
pre {
@apply cursor-text font-mono;
}
p > code,
pre {
@apply bg-gray-100 dark:bg-primary-800;
}
/* Inline code */
p > code {
@apply py-0.5 px-1 rounded-sm;
}
/* Code block */
pre {
@apply py-2 px-3 mb-4 leading-6 overflow-x-auto rounded-md break-all;
}
pre:last-child {
@apply mb-0;
}
/* Emojis */
img.emojione {
@apply w-5 h-5 m-0;
}
/* Markdown inline images (Pleroma) */
img:not(.emojione) {
@apply max-h-[500px] mx-auto rounded-sm;
}
&.big-emoji img.emojione {
@apply inline w-9 h-9 p-1;
}
.status-link {
@apply hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue;
}
.invisible {
font-size: 0 !important;
line-height: 0 !important;
display: inline-block;
width: 0;
height: 0;
position: absolute;
}
.invisible img,
.invisible svg {
margin: 0 !important;
border: 0 !important;
padding: 0 !important;
width: 0 !important;
height: 0 !important;
}
}
/* User setting to underline links */
body.underline-links {
[data-markup], [data-lexical-editor] {
a {
@apply underline;
}
}
}