Equation improvements (#7174)

This commit is contained in:
Elian Doran 2025-10-02 21:43:58 +03:00 committed by GitHub
commit ee8b41c81b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 38 additions and 20 deletions

View File

@ -6,12 +6,6 @@
the
<img src="1_Math Equations_image.png" width="20" height="15">button from the&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>&nbsp;(generally
found under the&nbsp;<a class="reference-link" href="#root/_help_CohkqWQC1iBv">Insert buttons</a>).</p>
<p>If inserting equations frequently, using the <kbd>Ctrl</kbd>+<kbd>M</kbd> keyboard
shortcut can be more comfortable. Alternatively, type <code>$$</code> or <code>\[</code> to
trigger the popup directly.</p>
<p>There is currently no quick way to insert an equation, such as surrounding
it with <code>$</code> or pressing <kbd>Ctrl</kbd>+<kbd>M</kbd> on an already
typed-out equation.</p>
<p>The mathematical expression must be written in the TeX format. There is
no visual editor for the math equations, only a preview.&nbsp;</p>
<p>Enabling <em>Display mode</em> will render the equation slightly bigger
@ -19,6 +13,12 @@
center it. Display mode equations will act as blocks (i.e. like paragraphs,
or tables) and can be inserted for example in lists. Non-display equations
can be part of the text.</p>
<h2>Keyboard shortcuts</h2>
<p>If inserting equations frequently, using the <kbd>Ctrl</kbd>+<kbd>M</kbd> keyboard
shortcut can be more comfortable. Alternatively, type <code>$$</code> or <code>\[</code> to
trigger the popup directly.</p>
<p>There is currently no quick way to turn an already typed-out equation,
such as surrounding it with <code>$</code> or pressing <kbd>Ctrl</kbd>+<kbd>M</kbd>.</p>
<h2>Supported math features</h2>
<p>Technically we are using the KaTeX library which allows for a subset of
the TeX format. To see the full list of supported features, consult the
@ -27,8 +27,12 @@
the official documentation.</p>
<h2>Markdown support</h2>
<p>Math equations will be preserved when exporting to or importing from Markdown,
surrounded by <code>\(</code> characters for inline math expressions, and <code>$\)</code> for
surrounded by <code>$</code> characters for inline math expressions, and <code>$$</code> for
display mode.</p>
<p>If you notice any issue with the Markdown import/export for equations,
feel free to <a href="#root/_help_wy8So3yZZlH9">report</a> it while providing
the equation that causes issues.</p>
the equation that causes issues.</p>
<h2>Formatting the equation</h2>
<p>It is possible to customize the font size and foreground color for both
inline and display-mode equations, just like any other text. For inline
equations, the background color/highlight can also be adjusted.</p>

View File

@ -16,9 +16,9 @@
<p>For logs that are not directly visible to the user, the standard <code>console.log</code> can
be used as well.</p>
<ul>
<li data-list-item-id="ec01fd8ccf51930dda1c2f707e78c0842">For front-end scripts, the log will be shown in the Developer Tools (also
<li>For front-end scripts, the log will be shown in the Developer Tools (also
known as Inspect).</li>
<li data-list-item-id="e62355c5371735daf1c436b4d65ba3549">For back-end scripts, the log will be shown in the server output while
<li>For back-end scripts, the log will be shown in the server output while
running but <strong>will not</strong> be visible in the&nbsp;<a class="reference-link"
href="#root/pOsGYCXsbNQG/BgmBlOIl72jZ/qzNzp9LYQyPT/_help_bnyigUA2UK7s">Backend (server) logs</a>.</li>
href="#root/_help_bnyigUA2UK7s">Backend (server) logs</a>.</li>
</ul>

View File

@ -3,20 +3,26 @@
Within text notes, it's possible to enter mathematical equations using the <img src="1_Math Equations_image.png" width="20" height="15"> button from the <a class="reference-link" href="Formatting%20toolbar.md">Formatting toolbar</a> (generally found under the <a class="reference-link" href="Insert%20buttons.md">Insert buttons</a>).
If inserting equations frequently, using the <kbd>Ctrl</kbd>+<kbd>M</kbd> keyboard shortcut can be more comfortable. Alternatively, type `$$` or `\[` to trigger the popup directly.
There is currently no quick way to insert an equation, such as surrounding it with `$` or pressing <kbd>Ctrl</kbd>+<kbd>M</kbd> on an already typed-out equation.
The mathematical expression must be written in the TeX format. There is no visual editor for the math equations, only a preview. 
Enabling _Display mode_ will render the equation slightly bigger (especially if using big operators such as summation, or fractions) and center it. Display mode equations will act as blocks (i.e. like paragraphs, or tables) and can be inserted for example in lists. Non-display equations can be part of the text.
## Keyboard shortcuts
If inserting equations frequently, using the <kbd>Ctrl</kbd>+<kbd>M</kbd> keyboard shortcut can be more comfortable. Alternatively, type `$$` or `\[` to trigger the popup directly.
There is currently no quick way to turn an already typed-out equation, such as surrounding it with `$` or pressing <kbd>Ctrl</kbd>+<kbd>M</kbd>.
## Supported math features
Technically we are using the KaTeX library which allows for a subset of the TeX format. To see the full list of supported features, consult the [Supported Functions](https://katex.org/docs/supported) and the [Support Table](https://katex.org/docs/support_table) from the official documentation.
## Markdown support
Math equations will be preserved when exporting to or importing from Markdown, surrounded by `\(` characters for inline math expressions, and `$\)` for display mode.
Math equations will be preserved when exporting to or importing from Markdown, surrounded by `$` characters for inline math expressions, and `$$` for display mode.
If you notice any issue with the Markdown import/export for equations, feel free to [report](../../Troubleshooting/Reporting%20issues.md) it while providing the equation that causes issues.
If you notice any issue with the Markdown import/export for equations, feel free to [report](../../Troubleshooting/Reporting%20issues.md) it while providing the equation that causes issues.
## Formatting the equation
It is possible to customize the font size and foreground color for both inline and display-mode equations, just like any other text. For inline equations, the background color/highlight can also be adjusted.

View File

@ -33,10 +33,18 @@ export default class MathCommand extends Command {
{ equation, type, display }
);
} else {
const selection = this.editor.model.document.selection;
// Create new model element
mathtex = writer.createElement(
display ? 'mathtex-display' : 'mathtex-inline',
{ equation, type: outputType, display }
{
// Inherit all attributes from selection (e.g. color, background color, size).
...Object.fromEntries( selection.getAttributes() ),
equation,
type: outputType,
display,
}
);
}
model.insertContent( mathtex );

View File

@ -59,12 +59,12 @@ export default class MathEditing extends Plugin {
allowWhere: '$text',
isInline: true,
isObject: true,
allowAttributes: [ 'equation', 'type', 'display' ]
allowAttributes: [ 'equation', 'type', 'display', 'fontSize', 'fontColor', 'fontBackgroundColor' ]
} );
schema.register( 'mathtex-display', {
inheritAllFrom: '$blockObject',
allowAttributes: [ 'equation', 'type', 'display' ]
allowAttributes: [ 'equation', 'type', 'display', 'fontSize', 'fontColor' ]
} );
}