Skip to content

Fixes for Spark: fonts, and linked styles #489

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

Merged
harbournick merged 2 commits into from
May 1, 2025
Merged

Fixes for Spark: fonts, and linked styles #489

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6ffe4a5
Fixes for Spark: fonts, and linked styles
VladaHarbour May 1, 2025
5746cae
fix failing tests
VladaHarbour May 1, 2025
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
21 changes: 19 additions & 2 deletions packages/super-editor/src/components/toolbar/super-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,14 +368,31 @@ export class SuperToolbar extends EventEmitter {
item.deactivate();
}

// Activate toolbar items based on linked styles
const styleIdMark = marks.find((mark) => mark.name === 'styleId');
if (styleIdMark?.attrs.styleId) {
const markToStyleMap = {
fontSize: 'font-size',
fontFamily: 'font-family',
bold: 'bold',
textAlign: 'textAlign',
};
const linkedStyles = this.activeEditor.converter?.linkedStyles.find((style) => style.id === styleIdMark.attrs.styleId);
if (markToStyleMap[item.name.value] in linkedStyles?.definition.styles) {
const value = {
[item.name.value]: linkedStyles?.definition.styles[markToStyleMap[item.name.value]]
};
item.activate(value);
}
}

const spacingAttr = marks.find((mark) => mark.name === 'spacing');
if (item.name.value === 'lineHeight' && (activeMark?.attrs?.lineHeight || spacingAttr)) {
item.selectedValue.value = activeMark?.attrs?.lineHeight || spacingAttr.attrs?.spacing?.line || '';
}

if (item.name.value === 'tableActions') {
if (inTable) item.disabled.value = false;
else item.disabled.value = true;
item.disabled.value = !inTable;
}
});
}
Expand Down
8 changes: 5 additions & 3 deletions packages/super-editor/src/core/super-converter/helpers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,14 +142,16 @@ const rgbToHex = (rgb) => {
.join('');
}

const getLineHeightValueString = (lineHeight, defaultUnit) => {
const getLineHeightValueString = (lineHeight, defaultUnit, lineRule = '', isObject = false) => {
let [value, unit] = parseSizeUnit(lineHeight);
if (Number.isNaN(value)) return {};
if (Number.isNaN(value) || value === 0) return {};
if (lineRule === 'atLeast' && value < 1) return {};

unit = unit ? unit : defaultUnit;

// MS Word has a slightly bigger gap with line spacing equal to Superdoc's
value += unit ? 4 : 0.2;
return `line-height: ${value}${unit}`;
return isObject ? { ['line-height']: `${value}${unit}` } : `line-height: ${value}${unit}`;
}

const deobfuscateFont = (arrayBuffer, guidHex) => {
Expand Down
1 change: 1 addition & 0 deletions packages/super-editor/src/core/super-converter/v2/importer/listImporter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -188,6 +188,7 @@ function handleListNodes({
attrs: {
textAlign: textStyle?.attrs.textAlign || textStyleFromStyles?.attrs.textAlign || null,
rsidRDefault: attributes?.['w:rsidRDefault'] || null,
styleId,
},
content: mergeTextNodes(parNode.content),
};
Expand Down
3 changes: 2 additions & 1 deletion packages/super-editor/src/extensions/line-height/line-height.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,8 @@ export const LineHeight = Extension.create({
parseDOM: (el) => el.style.lineHeight,
renderDOM: (attrs) => {
if (!attrs.lineHeight) return {};
return { style: getLineHeightValueString(attrs.lineHeight, this.options.defaults.unit) };

return { style: getLineHeightValueString(attrs.lineHeight, this.options.defaults.unit, attrs.spacing?.lineRule) };
},
},
},
Expand Down
33 changes: 21 additions & 12 deletions packages/super-editor/src/extensions/linked-styles/linked-styles.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export const LinkedStyles = Extension.create({
const parentNode = findParentNode((node) => node.type.name === 'paragraph')(tr.selection) || {};
pos = parentNode.pos;
paragraphNode = parentNode.node;
};
}

tr.setNodeMarkup(pos, undefined, {
...paragraphNode.attrs,
Expand All @@ -54,15 +54,15 @@ const createLinkedStylesPlugin = (editor) => {
const styles = editor.converter?.linkedStyles || [];
return {
styles,
decorations: generateDecorations(editor.state?.doc, styles),
decorations: generateDecorations(editor.state, styles),
};
},
apply(tr, prev, oldEditorState, newEditorState) {
if (!editor.converter || editor.options.mode !== 'docx') return { ...prev };
let decorations = prev.decorations || DecorationSet.empty;
if (tr.docChanged) {
const styles = LinkedStylesPluginKey.getState(editor.state).styles;
decorations = generateDecorations(newEditorState.doc, styles);
decorations = generateDecorations(newEditorState, styles);
}

return { ...prev, decorations };
Expand All @@ -79,13 +79,15 @@ const createLinkedStylesPlugin = (editor) => {
/**
* Generate style decorations for linked styles
*
* @param {Object} doc The current document object
* @param {Object} state Editor state
* @param {Array[Object]} styles The linked styles
* @returns {DecorationSet} The decorations
*/
const generateDecorations = (doc, styles) => {
const generateDecorations = (state, styles) => {
const decorations = [];
let lastStyleId = null;
const doc = state?.doc;

doc.descendants((node, pos) => {
const { name } = node.type;

Expand All @@ -97,7 +99,10 @@ const generateDecorations = (doc, styles) => {
const linkedStyle = getLinkedStyle(lastStyleId, styles);
if (!linkedStyle) return;

const styleString = generateLinkedStyleString(linkedStyle, node);
const $pos = state.doc.resolve(pos);
const parent = $pos.parent;

const styleString = generateLinkedStyleString(linkedStyle, node, parent);
if (!styleString) return;

const decoration = Decoration.inline(pos, pos + node.nodeSize, { style: styleString });
Expand All @@ -112,9 +117,10 @@ const generateDecorations = (doc, styles) => {
*
* @param {Object} linkedStyle The linked style object
* @param {Object} node The current node
* @param {Object} parent The parent of current
* @returns {String} The style string
*/
export const generateLinkedStyleString = (linkedStyle, node, includeSpacing = true) => {
export const generateLinkedStyleString = (linkedStyle, node, parent, includeSpacing = true) => {
if (!linkedStyle?.definition?.styles) return '';
const markValue = {};

Expand All @@ -138,16 +144,19 @@ export const generateLinkedStyleString = (linkedStyle, node, includeSpacing = tr

// Check if this node has the expected mark. If yes, we are not overriding it
const mark = flattenedMarks.find((n) => n.key === key);
const hasParentIndent = Object.keys(parent?.attrs.indent || {});
const hasParentSpacing = Object.keys(parent?.attrs.spacing || {});

// If no mark already in the node, we override the style
if (!mark) {
if (key === 'spacing' && includeSpacing) {
if (key === 'spacing' && includeSpacing && !hasParentSpacing) {
const space = getSpacingStyle(value);
Object.entries(space).forEach(([k, v]) => {
markValue[k] = v;
});
} else if (key === 'indent' && includeSpacing) {
} else if (key === 'indent' && includeSpacing && !hasParentIndent) {
const { leftIndent, rightIndent, firstLine } = value;

if (leftIndent) markValue['margin-left'] = leftIndent + 'px';
if (rightIndent) markValue['margin-right'] = rightIndent + 'px';
if (firstLine) markValue['text-indent'] = firstLine + 'px';
Expand All @@ -158,7 +167,7 @@ export const generateLinkedStyleString = (linkedStyle, node, includeSpacing = tr
}
}
});

return Object.entries(markValue).map(([key, value]) => `${key}: ${value}`).join(';');
};

Expand All @@ -174,11 +183,11 @@ const getLinkedStyle = (styleId, styles = []) => {
};

export const getSpacingStyle = (spacing) => {
const { lineSpaceBefore, lineSpaceAfter, line } = spacing;
const { lineSpaceBefore, lineSpaceAfter, line, lineRule } = spacing;
return {
'margin-top': lineSpaceBefore + 'px',
'margin-bottom': lineSpaceAfter + 'px',
...getLineHeightValueString(line, '')
...getLineHeightValueString(line, '', lineRule, true)
};
};

Expand Down
9 changes: 8 additions & 1 deletion packages/super-editor/src/tests/import/listImporter.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1167,6 +1167,7 @@ describe('custom nested list tests', () => {
type: 'paragraph',
attrs: {
rsidRDefault: '009F090C',
styleId: 'ListParagraph',
textAlign: null
},
content: [
Expand Down Expand Up @@ -1197,6 +1198,7 @@ describe('custom nested list tests', () => {
type: 'paragraph',
attrs: {
rsidRDefault: '006B7646',
styleId: 'ListParagraph',
textAlign: null
},
content: [
Expand Down Expand Up @@ -1408,6 +1410,7 @@ describe('custom nested list tests', () => {
type: 'paragraph',
attrs: {
rsidRDefault: '009F090C',
styleId: 'ListParagraph',
textAlign: null
},
content: [
Expand All @@ -1432,6 +1435,7 @@ describe('custom nested list tests', () => {
type: 'paragraph',
attrs: {
rsidRDefault: '009F090C',
styleId: 'ListParagraph',
textAlign: null
},
content: [
Expand Down Expand Up @@ -1640,6 +1644,7 @@ describe('custom nested list tests', () => {
type: 'paragraph',
attrs: {
rsidRDefault: '009F090C',
styleId: 'ListParagraph',
textAlign: null
},
content: [
Expand All @@ -1664,6 +1669,7 @@ describe('custom nested list tests', () => {
type: 'paragraph',
attrs: {
rsidRDefault: '009F090C',
styleId: 'ListParagraph',
textAlign: null
},
content: [
Expand Down Expand Up @@ -1757,7 +1763,8 @@ describe('custom nested list tests', () => {
type: 'paragraph',
attrs: {
rsidRDefault: '009F090C',
textAlign: null
textAlign: null,
styleId: 'ListParagraph',
},
content: [
{
Expand Down
Loading