EDI-3 Images

.github/release-drafter.yml

@@ -4,53 +4,53 @@ categories:
 
   - title: '🚀 Features'
     labels:
-      - 'feature'
-      - 'enhancement'
+      - 'Feature'
+      - 'Enhancement'
 
   - title: '🐛 Bug Fixes'
     labels:
-      - 'fix'
-      - 'bugfix'
-      - 'bug'
+      - 'Fix'
+      - 'Bugfix'
+      - 'Bug'
 
   - title: '🛠 Refactor'
-    label: 'refactor'
+    label: 'Refactor'
 
   - title: '💅 Style'
-    label: 'style'
+    label: 'Style'
 
   - title: '🧰 Maintenance'
     labels:
-      - 'chore'
-      - 'dependencies'
-      - 'ci'
+      - 'Chore'
+      - 'Dependencies'
+      - 'CI'
 
   - title: '📚 Documentation'
-    label: 'documentation'
+    label: 'Documentation'
 
   - title: '🧪 Tests'
-    label: 'tests'
+    label: 'Tests'
 
   - title: '🏎 Optimizations'
-    label: 'optimizations'
+    label: 'Optimizations'
 
 version-resolver:
   major:
     labels:
       - 'BREAKING CHANGES'
   minor:
     labels:
-      - 'feature'
-      - 'enhancement'
-      - 'dependencies'
+      - 'Feature'
+      - 'Enhancement'
+      - 'Dependencies'
   patch:
     labels:
-      - 'fix'
-      - 'bugfix'
-      - 'bug'
-      - 'optimizations'
-      - 'refactor'
-      - 'style'
+      - 'Fix'
+      - 'Bugfix'
+      - 'Bug'
+      - 'Optimizations'
+      - 'Refactor'
+      - 'Style'
   default: patch
 
 name-template: 'v$RESOLVED_VERSION'

.github/workflows/linear-linker.yml

@@ -2,7 +2,7 @@ name: Linear.app Linker
 
 on:
   pull_request:
-    types: [opened, closed, reopened, synchronize, ready_for_review]
+    types: [opened, edited, closed, reopened, synchronize, ready_for_review]
 
 jobs:
   linear_linker:

README.md

@@ -57,6 +57,33 @@ Write `1.` or `1)` + space to create an ordered list.
 
 Use `Tab` and `Shift+Tab` to manage the items nesting level.
 
+## Styles
+
+```css
+:root {
+    --editor-font-family: 'Open Sans', sans-serif;
+    --editor-font-size: 16px;
+    --editor-line-height: 24px;
+
+    --editor-mod-bold-font-weight: 600;
+    --editor-mod-inline-code-font-family: 'Source Code Pro', monospace;
+    --editor-mod-inline-code-padding: 4px 6px;
+    --editor-mod-inline-code-background: #f7f6f9;
+    --editor-mod-inline-code-border-radius: 6px;
+    --editor-mod-link-color: rgb(75, 50, 195);
+
+    --editor-paragraph-margin: 1em 0;
+
+    --editor-heading1-margin: 0.67em 0;
+    --editor-heading1-font-size: 30px;
+    --editor-heading1-line-height: 36px;
+    --editor-heading1-font-weight: 400;
+
+    --editor-list-margin: 1em 0;
+    --editor-list-padding: 0 0 0 24px;
+  }
+```
+
 ## Architecture
 
 [Excalidraw](https://excalidraw.com/#json=4811335044956160,DJxYluN2Ua3_wl756Fv62A)

src/editor/editor.tsx

@@ -3,6 +3,7 @@ import { RootProvider } from './root-provider'
 import { EditorProps, NormalizedEditorProps } from './types/editor-props'
 import { EditableEditor } from './editable-editor'
 import { ReadonlyEditor } from './readonly-editor'
+import { RootGlobalStyles } from './styles'
 
 function normalizeProps(dirty: EditorProps): NormalizedEditorProps {
   const normalized: Partial<NormalizedEditorProps> = { ...dirty }
@@ -29,6 +30,7 @@ export const Editor = (props: EditorProps) => {
 
   return (
     <RootProvider customExtensions={normalizedProps.customExtensions}>
+      <RootGlobalStyles />
       {editor}
     </RootProvider>
   )

src/editor/elements/image/index.ts

@@ -0,0 +1,2 @@
+// nothing
+export {}

src/editor/styles.ts

@@ -108,13 +108,38 @@ export const TippyStyles = createGlobalStyle`
   }
 `
 
+export const RootGlobalStyles = createGlobalStyle`
+  :root {
+    --editor-font-family: 'Open Sans', sans-serif;
+    --editor-font-size: 16px;
+    --editor-line-height: 24px;
+
+    --editor-mod-bold-font-weight: 600;
+    --editor-mod-inline-code-font-family: 'Source Code Pro', monospace;
+    --editor-mod-inline-code-padding: 4px 6px;
+    --editor-mod-inline-code-background: #f7f6f9;
+    --editor-mod-inline-code-border-radius: 6px;
+    --editor-mod-link-color: rgb(75, 50, 195);
+
+    --editor-paragraph-margin: 1em 0;
+
+    --editor-heading1-margin: 0.67em 0;
+    --editor-heading1-font-size: 30px;
+    --editor-heading1-line-height: 36px;
+    --editor-heading1-font-weight: 400;
+
+    --editor-list-margin: 1em 0;
+    --editor-list-padding: 0 0 0 24px;
+  }
+`
+
 export const StyledEditor = styled.div`
-  font-family: 'Open Sans', sans-serif;
-  font-size: 16px;
-  line-height: 24px;
+  font-family: var(--editor-font-family);
+  font-size: var(--editor-font-size);
+  line-height: var(--editor-line-height);
 
   a {
-    color: rgb(75, 50, 195);
+    color: var(--editor-mod-link-color);
     text-decoration: none;
   }
 
@@ -123,30 +148,36 @@ export const StyledEditor = styled.div`
   }
 
   code {
-    font-family: 'Source Code Pro', monospace;
-    padding: 4px 6px;
-    background: #f7f6f9;
-    border-radius: 6px;
+    font-family: var(--editor-mod-inline-code-font-family);
+    padding: var(--editor-mod-inline-code-padding);
+    background: var(--editor-mod-inline-code-background);
+    border-radius: var(--editor-mod-inline-code-border-radius);
   }
 
   b {
-    font-weight: 600;
+    font-weight: var(--editor-mod-bold-font-weight);
   }
 
-  h1 {
-    font-size: 30px;
-    line-height: 36px;
-    font-weight: 400;
+  p {
+    margin: var(--editor-paragraph-margin);
   }
 
-  p {
-    font-size: 16px;
-    line-height: 24px;
+  h1 {
+    margin: var(--editor-heading1-margin);
+    font-size: var(--editor-heading1-font-size);
+    line-height: var(--editor-heading1-line-height);
+    font-weight: var(--editor-heading1-font-weight);
   }
 
   ol,
   ul {
-    padding-left: 24px;
+    margin: var(--editor-list-margin);
+    padding: var(--editor-list-padding);
+  }
+
+  ul ul,
+  ol ol {
+    margin: 0;
   }
 
   ol ol {