Skip to content

Add H4-H6, strikethrough formatting & buttons #119

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
riasvdv wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add H4-H6, strikethrough formatting & buttons #119

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 7 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ const [editor] = new OverType('#editor', {
value: '# Document\n\nSelect text and use the toolbar!'
});

// Default toolbar: Bold, Italic, Code | Link | H1, H2, H3 | Lists, Tasks | Quote | View Mode
// Default toolbar: Bold, Italic, Strikethrough, Code | Link | H1, H2, H3 | Lists, Tasks | Quote | View Mode
```

**Custom Toolbar (v2.0):**
Expand All @@ -169,7 +169,7 @@ const [editor] = new OverType('#editor', {
]
});

// Available: bold, italic, code, link, h1, h2, h3, bulletList,
// Available: bold, italic, strikethrough, code, link, h1, h2, h3, h4, h5, h6, bulletList,
// orderedList, taskList, quote, separator, viewMode
```

Expand Down Expand Up @@ -203,7 +203,7 @@ document.querySelector('#bold-btn').addEventListener('click', () => {
});
```

Available actions include `toggleBold`, `toggleItalic`, `toggleCode`, `insertLink`, `toggleBulletList`, `toggleNumberedList`, `toggleQuote`, `toggleTaskList`, `insertHeader`, `toggleH1`/`H2`/`H3`, `getActiveFormats`, `hasFormat`, `expandSelection`, and `applyCustomFormat`. The same namespace is available as `window.markdownActions` and `OverType.markdownActions` in script-tag builds.
Available actions include `toggleBold`, `toggleItalic`, `toggleStrikethrough`, `toggleCode`, `insertLink`, `toggleBulletList`, `toggleNumberedList`, `toggleQuote`, `toggleTaskList`, `insertHeader`, `toggleH1`/`H2`/`H3`/`H4`/`H5`/`H6`, `getActiveFormats`, `hasFormat`, `expandSelection`, and `applyCustomFormat`. The same namespace is available as `window.markdownActions` and `OverType.markdownActions` in script-tag builds.

See [examples/custom-toolbar.html](examples/custom-toolbar.html) for complete examples.

Expand Down Expand Up @@ -345,6 +345,9 @@ const [editor] = new OverType('#editor', {
h1: '#f95738',
h2: '#ee964b',
h3: '#3d8a51',
h4: '#0d3b66',
h5: '#5a7a9b',
h6: '#999999',
strong: '#ee964b',
em: '#f95738',
link: '#0d3b66',
Expand Down Expand Up @@ -697,7 +700,7 @@ When no text is selected, Tab and Shift+Tab use normal browser focus navigation.

## Supported Markdown

- **Headers** - `# H1`, `## H2`, `### H3`
- **Headers** - `# H1` through `###### H6`
- **Bold** - `**text**` or `__text__`
- **Italic** - `*text*` or `_text_`
- **Strikethrough** - `~~text~~` or `~text~` (GFM)
Expand Down
8 changes: 8 additions & 0 deletions scripts/generate-types.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,7 @@ export default OverType;
export const markdownActions: {
toggleBold(textarea: HTMLTextAreaElement): void;
toggleItalic(textarea: HTMLTextAreaElement): void;
toggleStrikethrough(textarea: HTMLTextAreaElement): void;
toggleCode(textarea: HTMLTextAreaElement): void;
insertLink(textarea: HTMLTextAreaElement, options?: { url?: string; text?: string }): void;
toggleBulletList(textarea: HTMLTextAreaElement): void;
Expand All @@ -347,6 +348,9 @@ export const markdownActions: {
toggleH1(textarea: HTMLTextAreaElement): void;
toggleH2(textarea: HTMLTextAreaElement): void;
toggleH3(textarea: HTMLTextAreaElement): void;
toggleH4(textarea: HTMLTextAreaElement): void;
toggleH5(textarea: HTMLTextAreaElement): void;
toggleH6(textarea: HTMLTextAreaElement): void;
getActiveFormats(textarea: HTMLTextAreaElement): string[];
hasFormat(textarea: HTMLTextAreaElement, format: string): boolean;
expandSelection(textarea: HTMLTextAreaElement, options?: object): void;
Expand All @@ -359,12 +363,16 @@ export const markdownActions: {
export const toolbarButtons: {
bold: ToolbarButton;
italic: ToolbarButton;
strikethrough: ToolbarButton;
code: ToolbarButton;
separator: ToolbarButton;
link: ToolbarButton;
h1: ToolbarButton;
h2: ToolbarButton;
h3: ToolbarButton;
h4: ToolbarButton;
h5: ToolbarButton;
h6: ToolbarButton;
bulletList: ToolbarButton;
orderedList: ToolbarButton;
taskList: ToolbarButton;
Expand Down
18 changes: 18 additions & 0 deletions src/icons.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions src/overtype.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export interface PreviewColors {
h1?: string;
h2?: string;
h3?: string;
h4?: string;
h5?: string;
h6?: string;
hr?: string;
link?: string;
strong?: string;
Expand All @@ -33,6 +36,9 @@ export interface Theme {
h1?: string;
h2?: string;
h3?: string;
h4?: string;
h5?: string;
h6?: string;
hoverBg?: string;
hr?: string;
link?: string;
Expand Down Expand Up @@ -245,6 +251,7 @@ export default OverType;
export const markdownActions: {
toggleBold(textarea: HTMLTextAreaElement): void;
toggleItalic(textarea: HTMLTextAreaElement): void;
toggleStrikethrough(textarea: HTMLTextAreaElement): void;
toggleCode(textarea: HTMLTextAreaElement): void;
insertLink(textarea: HTMLTextAreaElement, options?: { url?: string; text?: string }): void;
toggleBulletList(textarea: HTMLTextAreaElement): void;
Expand All @@ -255,6 +262,9 @@ export const markdownActions: {
toggleH1(textarea: HTMLTextAreaElement): void;
toggleH2(textarea: HTMLTextAreaElement): void;
toggleH3(textarea: HTMLTextAreaElement): void;
toggleH4(textarea: HTMLTextAreaElement): void;
toggleH5(textarea: HTMLTextAreaElement): void;
toggleH6(textarea: HTMLTextAreaElement): void;
getActiveFormats(textarea: HTMLTextAreaElement): string[];
hasFormat(textarea: HTMLTextAreaElement, format: string): boolean;
expandSelection(textarea: HTMLTextAreaElement, options?: object): void;
Expand All @@ -267,12 +277,16 @@ export const markdownActions: {
export const toolbarButtons: {
bold: ToolbarButton;
italic: ToolbarButton;
strikethrough: ToolbarButton;
code: ToolbarButton;
separator: ToolbarButton;
link: ToolbarButton;
h1: ToolbarButton;
h2: ToolbarButton;
h3: ToolbarButton;
h4: ToolbarButton;
h5: ToolbarButton;
h6: ToolbarButton;
bulletList: ToolbarButton;
orderedList: ToolbarButton;
taskList: ToolbarButton;
Expand Down
4 changes: 2 additions & 2 deletions src/parser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,12 @@ export class MarkdownParser {
}

/**
* Parse headers (h1-h3 only)
* Parse headers (h1-h6)
* @param {string} html - HTML line to parse
* @returns {string} Parsed HTML with header styling
*/
static parseHeader(html) {
return html.replace(/^(#{1,3})\s(.+)$/, (match, hashes, content) => {
return html.replace(/^(#{1,6})\s(.+)$/, (match, hashes, content) => {
const level = hashes.length;
content = this.parseInlineElements(content);
return `<h${level}><span class="syntax-marker">${hashes} </span>${content}</h${level}>`;
Expand Down
43 changes: 41 additions & 2 deletions src/styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,11 +296,23 @@ export function generateStyles(options = {}) {
.overtype-wrapper .overtype-preview .h3 {
color: var(--h3, #3d8a51) !important;
}
.overtype-wrapper .overtype-preview .h4 {
color: var(--h4, #0d3b66) !important;
}
.overtype-wrapper .overtype-preview .h5 {
color: var(--h5, #5a7a9b) !important;
}
.overtype-wrapper .overtype-preview .h6 {
color: var(--h6, #999999) !important;
}

/* Semantic headers - flatten in edit mode */
.overtype-wrapper .overtype-preview h1,
.overtype-wrapper .overtype-preview h2,
.overtype-wrapper .overtype-preview h3 {
.overtype-wrapper .overtype-preview h3,
.overtype-wrapper .overtype-preview h4,
.overtype-wrapper .overtype-preview h5,
.overtype-wrapper .overtype-preview h6 {
font-size: inherit !important;
font-weight: bold !important;
margin: 0 !important;
Expand All @@ -319,6 +331,15 @@ export function generateStyles(options = {}) {
.overtype-wrapper .overtype-preview h3 {
color: var(--h3, #3d8a51) !important;
}
.overtype-wrapper .overtype-preview h4 {
color: var(--h4, #0d3b66) !important;
}
.overtype-wrapper .overtype-preview h5 {
color: var(--h5, #5a7a9b) !important;
}
.overtype-wrapper .overtype-preview h6 {
color: var(--h6, #999999) !important;
}

/* Lists - remove styling in edit mode */
.overtype-wrapper .overtype-preview ul,
Expand Down Expand Up @@ -718,7 +739,10 @@ export function generateStyles(options = {}) {
/* Headers - restore proper sizing in preview mode */
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1,
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2,
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3,
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h4,
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h5,
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h6 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
font-weight: 600 !important;
margin: 0 !important;
Expand All @@ -741,6 +765,21 @@ export function generateStyles(options = {}) {
color: var(--preview-h3, var(--preview-h3-default)) !important;
}

.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h4 {
font-size: 1em !important;
color: var(--preview-h4, var(--preview-h4-default)) !important;
}

.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h5 {
font-size: 0.83em !important;
color: var(--preview-h5, var(--preview-h5-default)) !important;
}

.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h6 {
font-size: 0.67em !important;
color: var(--preview-h6, var(--preview-h6-default)) !important;
}

/* Lists - restore list styling in preview mode */
.overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ul {
display: block !important;
Expand Down
12 changes: 12 additions & 0 deletions src/themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ export const solar = {
h1: '#f95738', // Tomato - h1 headers
h2: '#ee964b', // Sandy Brown - h2 headers
h3: '#3d8a51', // Forest green - h3 headers
h4: '#0d3b66', // Yale Blue - h4 headers
h5: '#5a7a9b', // Muted blue - h5 headers
h6: '#999999', // Gray - h6 headers
strong: '#ee964b', // Sandy Brown - bold text
em: '#f95738', // Tomato - italic text
del: '#ee964b', // Sandy Brown - deleted text (same as strong)
Expand Down Expand Up @@ -46,6 +49,9 @@ export const solar = {
h1: 'inherit',
h2: 'inherit',
h3: 'inherit',
h4: 'inherit',
h5: 'inherit',
h6: 'inherit',
strong: 'inherit',
em: 'inherit',
link: '#0d3b66',
Expand All @@ -71,6 +77,9 @@ export const cave = {
h1: '#d4a5ff', // Rich lavender - h1 headers
h2: '#f6ae2d', // Hunyadi Yellow - h2 headers
h3: '#9fcfec', // Brighter blue - h3 headers
h4: '#c5dde8', // Light blue-gray - h4 headers
h5: '#9fcfec', // Brighter blue - h5 headers
h6: '#7a8c98', // Muted gray-blue - h6 headers
strong: '#f6ae2d', // Hunyadi Yellow - bold text
em: '#9fcfec', // Brighter blue - italic text
del: '#f6ae2d', // Hunyadi Yellow - deleted text (same as strong)
Expand Down Expand Up @@ -100,6 +109,9 @@ export const cave = {
h1: 'inherit',
h2: 'inherit',
h3: 'inherit',
h4: 'inherit',
h5: 'inherit',
h6: 'inherit',
strong: 'inherit',
em: 'inherit',
link: '#9fcfec',
Expand Down
49 changes: 49 additions & 0 deletions src/toolbar-buttons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,18 @@ export const toolbarButtons = {
}
},

strikethrough: {
name: 'strikethrough',
actionId: 'toggleStrikethrough',
icon: icons.strikethroughIcon,
title: 'Strikethrough',
isActive: ({ activeFormats }) => activeFormats.includes('strikethrough'),
action: ({ editor }) => {
markdownActions.toggleStrikethrough(editor.textarea);
editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
}
},

code: {
name: 'code',
actionId: 'toggleCode',
Expand Down Expand Up @@ -102,6 +114,42 @@ export const toolbarButtons = {
}
},

h4: {
name: 'h4',
actionId: 'toggleH4',
icon: icons.h4Icon,
title: 'Heading 4',
isActive: ({ activeFormats }) => activeFormats.includes('header-4'),
action: ({ editor }) => {
markdownActions.toggleH4(editor.textarea);
editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
}
},

h5: {
name: 'h5',
actionId: 'toggleH5',
icon: icons.h5Icon,
title: 'Heading 5',
isActive: ({ activeFormats }) => activeFormats.includes('header-5'),
action: ({ editor }) => {
markdownActions.toggleH5(editor.textarea);
editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
}
},

h6: {
name: 'h6',
actionId: 'toggleH6',
icon: icons.h6Icon,
title: 'Heading 6',
isActive: ({ activeFormats }) => activeFormats.includes('header-6'),
action: ({ editor }) => {
markdownActions.toggleH6(editor.textarea);
editor.textarea.dispatchEvent(new Event('input', { bubbles: true }));
}
},

bulletList: {
name: 'bulletList',
actionId: 'toggleBulletList',
Expand Down Expand Up @@ -191,6 +239,7 @@ export const toolbarButtons = {
export const defaultToolbarButtons = [
toolbarButtons.bold,
toolbarButtons.italic,
toolbarButtons.strikethrough,
toolbarButtons.code,
toolbarButtons.separator,
toolbarButtons.link,
Expand Down
5 changes: 4 additions & 1 deletion test/overtype.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,10 @@ console.log('\n📝 Parser Tests\n');
{ input: '# Title', expected: '<div><h1><span class="syntax-marker"># </span>Title</h1></div>' },
{ input: '## Subtitle', expected: '<div><h2><span class="syntax-marker">## </span>Subtitle</h2></div>' },
{ input: '### Section', expected: '<div><h3><span class="syntax-marker">### </span>Section</h3></div>' },
{ input: '#### Too Deep', expected: '<div>#### Too Deep</div>' }
{ input: '#### Detail', expected: '<div><h4><span class="syntax-marker">#### </span>Detail</h4></div>' },
{ input: '##### Fine Print', expected: '<div><h5><span class="syntax-marker">##### </span>Fine Print</h5></div>' },
{ input: '###### Caption', expected: '<div><h6><span class="syntax-marker">###### </span>Caption</h6></div>' },
{ input: '####### Too Deep', expected: '<div>####### Too Deep</div>' }
];

tests.forEach(test => {
Expand Down
Loading