Skip to content

Commit

Permalink
Merge pull request #2563 from microsoft/u/juliaroldi/add-markdown-opt…
Browse files Browse the repository at this point in the history 
…ions

Preserve format after apply markdown and add options to the side pane
  • Loading branch information
@juliaroldi
juliaroldi authored Apr 5, 2024
2 parents 99a3bbf + 4065ba6 commit 31037a1
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 7 deletions.
80 changes: 79 additions & 1 deletion demo/scripts/controlsV2/sidePane/editorOptions/Plugins.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,13 +132,57 @@ export class Plugins extends PluginsBase<keyof NewPluginList> {
private tableMenu = React.createRef<HTMLInputElement>();
private imageMenu = React.createRef<HTMLInputElement>();
private watermarkText = React.createRef<HTMLInputElement>();
private autoBullet = React.createRef<HTMLInputElement>();
private autoNumbering = React.createRef<HTMLInputElement>();
private autoLink = React.createRef<HTMLInputElement>();
private autoUnlink = React.createRef<HTMLInputElement>();
private autoHyphen = React.createRef<HTMLInputElement>();
private markdownBold = React.createRef<HTMLInputElement>();
private markdownItalic = React.createRef<HTMLInputElement>();
private markdownStrikethrough = React.createRef<HTMLInputElement>();
private markdownCode = React.createRef<HTMLInputElement>();
private linkTitle = React.createRef<HTMLInputElement>();

render(): JSX.Element {
return (
<table>
<tbody>
{this.renderPluginItem('autoFormat', 'AutoFormat')}
{this.renderPluginItem(
'autoFormat',
'AutoFormat',
<>
{this.renderCheckBox(
'Bullet',
this.autoBullet,
this.props.state.autoFormatOptions.autoBullet,
(state, value) => (state.autoFormatOptions.autoBullet = value)
)}
{this.renderCheckBox(
'Numbering',
this.autoNumbering,
this.props.state.autoFormatOptions.autoNumbering,
(state, value) => (state.autoFormatOptions.autoNumbering = value)
)}
{this.renderCheckBox(
'Link',
this.autoLink,
this.props.state.autoFormatOptions.autoLink,
(state, value) => (state.autoFormatOptions.autoLink = value)
)}
{this.renderCheckBox(
'Unlink',
this.autoUnlink,
this.props.state.autoFormatOptions.autoUnlink,
(state, value) => (state.autoFormatOptions.autoUnlink = value)
)}
{this.renderCheckBox(
'Hyphen',
this.autoHyphen,
this.props.state.autoFormatOptions.autoHyphen,
(state, value) => (state.autoFormatOptions.autoHyphen = value)
)}
</>
)}
{this.renderPluginItem('edit', 'Edit')}
{this.renderPluginItem(
'paste',
Expand Down Expand Up @@ -190,6 +234,40 @@ export class Plugins extends PluginsBase<keyof NewPluginList> {
{this.renderPluginItem('emoji', 'Emoji')}
{this.renderPluginItem('pasteOption', 'PasteOptions')}
{this.renderPluginItem('sampleEntity', 'SampleEntity')}
{this.renderPluginItem(
'markdown',
'Markdown',
<>
{this.renderCheckBox(
'Bold',
this.markdownBold,
this.props.state.markdownOptions.bold,
(state, value) => (state.markdownOptions.bold = value)
)}
{this.renderCheckBox(
'Italic',
this.markdownItalic,
this.props.state.markdownOptions.italic,
(state, value) => (state.markdownOptions.italic = value)
)}
{this.renderCheckBox(
'Strikethrough',
this.markdownStrikethrough,
this.props.state.markdownOptions.strikethrough,
(state, value) => (state.markdownOptions.strikethrough = value)
)}

{this.renderCheckBox(
'Code',
this.markdownCode,
this.props.state.markdownOptions.codeFormat !== undefined,
(state, value) =>
value
? (state.markdownOptions.codeFormat = {})
: (state.markdownOptions.codeFormat = undefined)
)}
</>
)}
{this.renderPluginItem(
'hyperlink',
'Hyperlink Plugin',
Expand Down
2 changes: 1 addition & 1 deletion packages/roosterjs-content-model-plugins/lib/autoFormat/AutoFormatPlugin.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export class AutoFormatPlugin implements EditorPlugin {
case ' ':
formatTextSegmentBeforeSelectionMarker(
editor,
(model, previousSegment, paragraph, context) => {
(model, previousSegment, paragraph, _markerFormat, context) => {
const {
autoBullet,
autoNumbering,
Expand Down
8 changes: 7 additions & 1 deletion packages/roosterjs-content-model-plugins/lib/markdown/utils/setFormat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,15 @@ export function setFormat(
) {
formatTextSegmentBeforeSelectionMarker(
editor,
(_model, previousSegment, paragraph, context) => {
(_model, previousSegment, paragraph, markerFormat, context) => {
if (previousSegment.text[previousSegment.text.length - 1] == character) {
const textBeforeMarker = previousSegment.text.slice(0, -1);
context.newPendingFormat = {
...markerFormat,
strikethrough: !!markerFormat.strikethrough,
italic: !!markerFormat.italic,
fontWeight: markerFormat?.fontWeight ? 'bold' : undefined,
};
if (textBeforeMarker.indexOf(character) > -1) {
const lastCharIndex = previousSegment.text.length;
const firstCharIndex = previousSegment.text
Expand Down
4 changes: 3 additions & 1 deletion ...roosterjs-content-model-plugins/lib/pluginUtils/formatTextSegmentBeforeSelectionMarker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { getSelectedSegmentsAndParagraphs } from 'roosterjs-content-model-dom';
import type {
ContentModelDocument,
ContentModelParagraph,
ContentModelSegmentFormat,
ContentModelText,
FormatContentModelContext,
IEditor,
Expand All @@ -16,6 +17,7 @@ export function formatTextSegmentBeforeSelectionMarker(
model: ContentModelDocument,
previousSegment: ContentModelText,
paragraph: ContentModelParagraph,
markerFormat: ContentModelSegmentFormat,
context: FormatContentModelContext
) => boolean
) {
Expand All @@ -32,7 +34,7 @@ export function formatTextSegmentBeforeSelectionMarker(
if (marker.segmentType === 'SelectionMarker' && markerIndex > 0) {
const previousSegment = paragraph.segments[markerIndex - 1];
if (previousSegment && previousSegment.segmentType === 'Text') {
return callback(model, previousSegment, paragraph, context);
return callback(model, previousSegment, paragraph, marker.format, context);
}
}
}
Expand Down
8 changes: 5 additions & 3 deletions ...erjs-content-model-plugins/test/pluginUtils/formatTextSegmentBeforeSelectionMarkerTest.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { transformHyphen } from '../../lib/autoFormat/hyphen/transformHyphen';
import {
ContentModelDocument,
ContentModelParagraph,
ContentModelSegmentFormat,
ContentModelText,
FormatContentModelContext,
} from 'roosterjs-content-model-types';
Expand All @@ -16,6 +17,7 @@ describe('formatTextSegmentBeforeSelectionMarker', () => {
model: ContentModelDocument,
previousSegment: ContentModelText,
paragraph: ContentModelParagraph,
markerFormat: ContentModelSegmentFormat,
context: FormatContentModelContext
) => boolean,
expectedModel: ContentModelDocument,
Expand Down Expand Up @@ -203,7 +205,7 @@ describe('formatTextSegmentBeforeSelectionMarker - keyboardListTrigger', () => {
focus: () => {},
formatContentModel: formatWithContentModelSpy,
} as any,
(model, _previousSegment, paragraph, context) => {
(model, _previousSegment, paragraph, _markerFormat, context) => {
return keyboardListTrigger(model, paragraph, context, autoBullet, autoNumbering);
}
);
Expand Down Expand Up @@ -1260,7 +1262,7 @@ describe('formatTextSegmentBeforeSelectionMarker - createLinkAfterSpace', () =>
focus: () => {},
formatContentModel: formatWithContentModelSpy,
} as any,
(_model, previousSegment, paragraph, context) => {
(_model, previousSegment, paragraph, _markerFormat, context) => {
return createLinkAfterSpace(previousSegment, paragraph, context);
}
);
Expand Down Expand Up @@ -1586,7 +1588,7 @@ describe('formatTextSegmentBeforeSelectionMarker - transformHyphen', () => {
focus: () => {},
formatContentModel: formatWithContentModelSpy,
} as any,
(_model, previousSegment, paragraph, context) => {
(_model, previousSegment, paragraph, _markerFormat, context) => {
return transformHyphen(previousSegment, paragraph, context);
}
);
Expand Down

0 comments on commit 31037a1

Please sign in to comment.