wiris / html-integrations Goto Github PK

Original issue - ckeditor/ckeditor5#1874.

Steps to reproduce

Video to reproduce the issue - https://imgur.com/NA9pz3Q

1. Open the editor
2. Enter some text. (enter space after text)
3. Click on MathType Plugin
4. Enter any equation. Click Ok.
5. Now try typing.

Expected result

Should be able to type.

Actual result

Unable to type.

Description

Initialization passes without errors. When clicked dialog will open. And I can't close or cancel.

Vue Component:

<template>
  <div>
    <div id="toolbarLocation" />
    <div
      id="example"
      contenteditable="true"
    >
      Try me!
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, mixins, Prop } from 'nuxt-property-decorator';

  @Component
  export default class WirisGeneric extends mixins() {
    private wiris_generic;

    protected mounted(): void {
      const genericIntegrationProperties = {};

      genericIntegrationProperties.target = document.getElementById('example');
      genericIntegrationProperties.toolbar = document.getElementById('toolbarLocation');

      this.wiris_generic = new WirisPlugin.GenericIntegration(genericIntegrationProperties);

      this.wiris_generic.init();
      this.wiris_generic.listeners.fire('onTargetReady', {});
    }
  }
</script>

nuxt.config.js:

  plugins: [
    {
      src: './node_modules/@wiris/mathtype-generic/wirisplugin-generic.js',
      mode: 'client',
    },
  ],

Environment

What is the relevant software and their versions?

package.json:

  "dependencies": {
    "@apollo/client": "^3.3.20",
    "@wiris/mathtype-generic": "^7.27.0",
    "apollo-link-http": "^1.5.17",
    "apollo-upload-client": "^16.0.0",
    "cookie-universal-nuxt": "^2.1.5",
    "core-js": "^3.9.1",
    "graphql": "^15.5.1",
    "lodash": "^4.17.21",
    "mime-types": "^2.1.31",
    "nuxt": "^2.15.3",
    "nuxt-property-decorator": "^2.9.1",
    "react": "^17.0.2",
    "vue-nl2br": "^0.1.2",
    "vuedraggable": "^2.24.3"
  },
  "devDependencies": {
    "@graphql-codegen/cli": "^1.21.6",
    "@graphql-codegen/typescript": "^1.22.4",
    "@mdi/font": "^5.9.55",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "@types/apollo-upload-client": "^14.1.0",
    "@types/lodash": "^4.14.170",
    "@types/mime-types": "^2.1.0",
    "@types/react": "^17.0.13",
    "@typescript-eslint/eslint-plugin": "^4.27.0",
    "@typescript-eslint/parser": "^4.27.0",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.29.0",
    "eslint-config-airbnb-base": "^14.2.1",
    "eslint-config-prettier": "^8.1.0",
    "eslint-import-resolver-nuxt": "^1.0.1",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.11.1",
    "eslint-plugin-vuetify": "^1.0.1",
    "jest": "^26.6.3",
    "lint-staged": "^10.5.4",
    "prettier": "^2.2.1",
    "stylelint": "^13.12.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^21.0.0",
    "ts-jest": "^26.5.4",
    "typescript": "^4.3.4",
    "vue-jest": "^3.0.4",
    "vue-router": "^3.5.2",
    "vuetify": "^2.5.5"
  }

Expected result

The dialog should close

Actual result

Dialogue does not close.

Error:

wirisplugin-generic.js?588c:formatted:2549 Uncaught TypeError: Cannot read property 'getSelection' of null
at Function.value (wirisplugin-generic.js?588c:formatted:2549)
at e.value (wirisplugin-generic.js?588c:formatted:2933)

Original issue - ckeditor/ckeditor5#2048.

I simply try to implement the MathType plugin following this documentation:

• https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/react.html
• https://ckeditor.com/docs/ckeditor5/latest/features/mathtype.html#usage

I'm getting an error and this only happens when i try to implement the MathType plugin. I'm not sure if i'm missing any config settings that i have to parse to
initialize the plugin but reading trough the documentation i'm not seeing anything i'm missing. Maybe I have to buy a licence or something??

Steps to reproduce

1. Clone this Repo: https://github.com/mstermaaten/CKEditor-Issue
2. npm i && npm start

Expected result

Original issue - ckeditor/ckeditor5#5993.

Steps to reproduce

1. In empty paragraph click 'insert math formula'
2. Click on 'arrow tab'
3. Choose one of the arrows with a single number placeholder (above or below)
4. Type some numbers before the arrow, after the arrow and in the placeholder

Expected result

Numbers should render right above or below the arrow, arrow should change its width.

Actual result

With longer formulas numbers are rendering in wrong place.

Other details

The 7.18.0 hardcodes the dependencies to CKEditor 5 packages to specific major versions. Namely, I mean this:

This means that MathType cannot be used with CKEditor 5 v17.0.0. What people will see is the "some modules are duplicated" error.

What you should be doing is specifying the lowest known version of those CKEditor 5 dependencies with which MathType is known to work.

    "@ckeditor/ckeditor5-core": ">=16.0.0",
    "@ckeditor/ckeditor5-engine": ">=16.0.0",
    "@ckeditor/ckeditor5-ui": ">=16.0.0",
    "@ckeditor/ckeditor5-widget": ">=16.0.0",

This is a critical issue as it makes the plugin unusable.

Tested on new version, branch ckeditor5-demo

It's a follow-up for this issue #1.
The original bug seems to be fixed -I'm able to type. But when after adding a formula I start to type, the formula disappears.

Original issue - ckeditor/ckeditor5#5757.

A little background knowledge, as the feature doesn't seem to be very well documented, but explained by Wiris:
With the MathType plugin installed in a CKEditor 5 instance, it is possible to write LaTeX directly in the editor by wrapping it between $$, ie. $$\frac{x}{3}$$, and then edit it using the MathType-editor by double clicking on it or placing the cursor on it and click the MathType-button in the toolbar.

Steps to reproduce

1. Insert LaTeX wrapped in $$, ie. $$\frac{x}{3}$$
2. Get data from the editor instance using getData
3. Load content again, either using setData or setting it as initialData and reload the page

Expected result

When I load data again, I should see the $$ wrapped LaTex and should be able to edit it as LaTeX in the MathType UI by double clicking on it or placing the cursor on it and click the MathType-button in the toolbar.

Actual result

When I load data again, I get an empty preview image.

Other details

The difference in markup from "normal" equations inserted using the MathType UI and using $$ latex syntax is that the ones inserted using $$ gets wrapped in a tag and gets a tag containing the inserted LaTex.

To me it looks like the editor doesn't understand the difference between equations inserted this way, and "normal" equations inserted using the MathType UI, and then tries to preview them which it should not.

Original issue: ckeditor/ckeditor5#8039

📝 Provide detailed reproduction steps (if any)

1. Add MathType equation
2. Double click on it to edit
3. Select the equation and press delete or backspace
4. In MathType window press Insert

✔️ Expected result

New/edited equation is inserted in place of the removed one - seems most intuitive, although I'm not 100% sure if that's most suitable in this case.

❌ Actual result

Editor crashes:

Uncaught TypeError: Cannot read property 'parent' of undefined
    at Function._createBefore (position.js:990)
    at jl.createPositionBefore (model.js:661)
    at Object.callback (integration.js:178)
    at jl._runPendingChanges (model.js:830)
    at jl.change (model.js:175)
    at ew.insertMathml (integration.js:145)
    at ew.insertFormula (integration.js:259)
    at ew.updateFormula (integrationmodel.js:331)
    at Hb.submitAction (contentmanager.js:381)
    at Kb.submitAction (modal.js:269)

📃 Other details

• Browser: any
• CKEditor version: any

I got this error every time I tried to use the plugin. Solution was to change plugin.js line 219:

- return modelWriter.createElement('mathml', {...
+ return modelWriter.writer.createElement('mathml', {...

replicable in https://demo.wiris.com/integrations/tinymce/

1. Use an Android tablet
2. Insert math equation or chem equation
3. notice that the toolbar that was on the top, is cut off and not accessible at all

Original issue - ckeditor/ckeditor5#5759.

This error has occurred a couple times now when setting data from firebase.

The error seems to occur when the article is high in formulas created with the MathType plugin.
But this is not the case every time, sometimes setting data with only 1 formula will trigger the error to.

The documentation doesn't say a lot on how to fix or prevent this error, I was hoping you guys could give a bit more guidance in how to handle this error.

It is a bit annoying because now if the client as this error we have to go into the database and remove snippets manually...

To see a document that trows the error please click the link below to see the demo V of the CMS used to create the documents:

https://objective-blackwell-ced0b4.netlify.com
username: [email protected]
pw: testing

If any information is needed please let me know.

Expected result

That any document created with the editor is able to be set as data.

Actual result

Original issue: ckeditor/ckeditor5#9073

Steps to reproduce:

1. Add formula to the editor
2. Enable read only mode: editor.isReadOnly = true
3. Double click on the formula

Expected behavior:

MathType window does not open.

Actual behavior:

MathType window opens, you can modify and save the formula.

Screencast:

Other info:

• browser: any

Tested on:

• MathType version 7.24.4
• CKEditor plugins version 25.0.0

Are you reporting a feature request or a bug?

Originally reported at ckeditor/ckeditor4#4268

It's a feature request

I would like to know when OK is clicked in Mathtype Panel. Is there onOK handler for this purpose?

Other details

• Browser: Version 85.0.4183.83 (Official Build) (64-bit)

• OS: OSX

• Integration version:

• CKEditor version: latest (npm install ckeditor4-react)

• Installed CKEditor plugins: https://www.npmjs.com/package/@wiris/mathtype-ckeditor4

i am using wiris external plugin in ckediror4-react and its working fine in window and as well as macOs chrome and safari browser but in iPad 6 it's not working as expected. it taking too much time or some time not able to close the wiris editor modal window after inserting any symbols.

Other details

• Browser: Safari
• OS: iOs
• Integration version: ckeditor4-react
• CKEditor version: ckeditor-4
• Installed CKEditor plugins: wiris

To reproduce
1 - Use CKeditor 5 with MathType
2 - Insert any formula
3 - Type anything
The error : Uncaught CKEditorError: e.createElement is not a function
Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-e.createElement is not a function

Hi,

Recently, I have developed some editor by using react. and I used mathtype in ckeditor5.
this plugin is very cool and convenient.
so I need mathtype.

however, I have a problem I used this super cool plugin.
I just want to customize toolbar and items in Chemtype.
so I tried to change some code in "node_modules/wiris/mathtype-html-integration-devkit/src/core.src.js" (below image)

I changed toolbar string so this code can change toolbar. It was Awesome!

However, It didn't insert equation in editor by clicking insert button.
I faced below error. I can't solve this problem.
please tell me how can I fix the this problem or another way to customize Chemtype's toolbar and Items.

In function Parser.createShowImageSrc, the copy for dataMd5 is wrong,

it should be:

--- a/packages/mathtype-html-integration-devkit/src/parser.js
+++ b/packages/mathtype-html-integration-devkit/src/parser.js
@@ -320,8 +320,7 @@ export default class Parser {
   static createShowImageSrc(data, language) {
     const dataMd5 = [];
     const renderParams = ['mml', 'color', 'centerbaseline', 'zoom', 'dpi', 'fontSize', 'fontFamily', 'defaultStretchy', 'backgroundColor', 'format'];
-    renderParams.forEach((key) => {
-      const param = renderParams[key];
+    renderParams.forEach((param) => {
       if (typeof data[param] !== 'undefined') {
         dataMd5[param] = data[param];
       }

because renderParams is an array.

This bug causes every call on showimage API is always with the same and wrong parameter of formula because dataMd5 is always [].

Original issue - ckeditor/ckeditor5#5957.

Steps to reproduce

1. Run CKEditor with the following code :

const commands = [ 'MathType', 'ChemType', 'link' ];
for ( const command of commands ) {
	  const commandToBlock = editor.commands.get( command );
	  commandToBlock.on( 'change:isEnabled', evt => {
		  commandToBlock.isEnabled = false;
		  evt.stop();
	  }, { priority: 'lowest' } );

	  commandToBlock.isEnabled = false;
};

Expected result

MathType and ChemType plugins toolbar buttons should be disabled and commands should not work.

Actual result

Commands for MathType and ChemType plugins don't work however buttons are enabled which gives the false impression that plugins are working.

Original report: ckeditor/ckeditor5#7747
Code from original report: https://github.com/7khatcode/Q2ACustomCkEditor
Live demo from original report: https://7khatcode.liara.run/ask

Steps to reproduce:

1. Prepare custom editor build
2. Add MathType plugin to the build
3. In src/ckeditor.js add to configuration:

language: {
    ui: 'de',
    content: 'de'
}

4. In webpack.config.js modify:

new CKEditorWebpackPlugin( {
    language: 'de',             // <-- add language here
    additionalLanguages: 'all'
} ),

5. Build the editor and open it
6. Click MathType icon in the toolbar

Expected:

MathType works without problems

Actual:

You get a crash:

Uncaught TypeError: language.toLowerCase is not a function
    at com.wiris.editor.EditorModel.vh2.com.wiris.editor.EditorModel.normalizeLanguage (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at com.wiris.editor.EditorModel.vh2.com.wiris.editor.EditorModel.setParam (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at com.wiris.editor.EditorModel.vh2.com.wiris.editor.EditorModel.setParams (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at new com.wiris.editor.EditorModel.vh2.com.wiris.editor.EditorModel (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at Function.com.wiris.editor.EditorModel.getNewInstanceFromJSON (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at Function.com.wiris.editor.EditorModel.getNewInstanceWithParams (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at new com.wiris.js.JsEditor.vh2.com.wiris.js.JsEditor (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at Function.com.wiris.js.JsEditor.newInstance (editor?lang=[object Object]&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at Lb.insertEditor (contentmanager.js:174)

I am looking for a way to insert Maths formulas in one of my applications built for a school.
We are using Quill editor to write text in the application as CKEditor and tinyMCE are very expensive.
We tried to integrate wiris plugin with Quill editor with no success.
Can you please suggest a way to do so?

Steps to reproduce

1. Install the latest (v7.21.0) version of MathType for CKEditor 5.
2. Click on the MathType/ChemType icon in the toolbar.

Current result

The editor crashes.

Error

Uncaught TypeError: Cannot read property 'length' of undefined
    at Function.get (stringmanager.js:20)
    at new ModalDialog (modal.js:114)
    at Core.openModalDialog (core.src.js:702)
    at CKEditor5Integration.openNewFormulaEditor (integrationmodel.js:287)
    at CKEditor5Integration.openNewFormulaEditor (integration.js:127)
    at MathTypeCommand.openEditor (commands.js:51)
    at MathTypeCommand.execute (commands.js:29)
    at MathTypeCommand.<anonymous> (observablemixin.js:255)
    at MathTypeCommand.fire (emittermixin.js:209)
    at MathTypeCommand.<computed> [as execute] (observablemixin.js:259)

Notes

The issue is in StringManager. It seems that this line causes it:

https://github.com/wiris/html-integrations/blob/stable/packages/mathtype-html-integration-devkit/src/stringmanager.js#L17

It should verify if language is not undefined.

It seems that the issue has been introduced earlier, as even in v7.20.0 opening the MathType dialog gives a warning:

Unknown language undefined set in StringManager.

It hasn't crashed because there was no operations on this.language. In v7.21.0 the following code has been added and it throws, as this.language is undefined:

// Cut down on strings. e.g. en_US -> en
if (language.length > 2) {
  language = language.slice(0, 2);
}

Original issue: ckeditor/ckeditor5#8040

📝 Provide detailed reproduction steps (if any)

1. Click MathType toolbar icon
2. Make MathType window full-screen
3. Type something
4. Click twice outside the modal window

✔️ Expected result

No errors

❌ Actual result

Uncaught ReferenceError: _wrs_modalWindow is not defined
    at Yb.show (popupmessage.js:120)
    at Kb.showPopUpMessage (modal.js:1407)
    at Kb.cancelAction (modal.js:285)

📃 Other details

• Browser: any
• CKEditor version: any

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Tested on new version, branch ckeditor5-demo

Steps to reproduce:

• add MathType formula as an item on TodoList
• double-click on the formula to open MathType editing window
• click ok in MathType editing window

Result:

Uncaught TypeError: Cannot read property 'name' of undefined
 at Mapper.getModelLength (mapper.js:485)
 at Mapper._findPositionIn (mapper.js:550)
 at Mapper.on.priority (mapper.js:107)
 at Mapper.fire (emittermixin.js:209)
 at Mapper.toViewPosition (mapper.js:334)
 at DowncastDispatcher.<anonymous> (downcasthelpers.js:399)
 at DowncastDispatcher.fire (emittermixin.js:209)
 at DowncastDispatcher.convertRemove (downcastdispatcher.js:213)
 at DowncastDispatcher.convertChanges (downcastdispatcher.js:139)
 at editingcontroller.js:92

Original issue - ckeditor/ckeditor5#5732.

Steps to reproduce

Open editor with MathType plugin and execute editor.setData('&');.

Expected result

Character & should be displayed just like in editor without MathType plugin.

Actual result

Error gets thrown: Parse error - Error parsing XML

📝 Provide detailed reproduction steps (if any)

Original issue: ckeditor/ckeditor5#6484

1. Open editor with MathType and table
2. Set the following data:

editor.setData("<p><math xmlns='http://www.w3.org/1998/Math/MathML'><mroot><mn>34</mn><mn>2</mn></mroot></math></p><figure class='table'><table><tbody><tr><td><math xmlns='http://www.w3.org/1998/Math/MathML'><mroot><mn>34</mn><mn>2</mn></mroot></math></td><td> </td></tr><tr><td> </td><td> </td></tr></tbody></table></figure>")

✔️ Expected result

❌ Actual result

📃 Other details

• Browser: any

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

📝 Provide detailed reproduction steps (if any)

Original issue: ckeditor/ckeditor5#6481

1. Open editor with MathType and Comments
2. Add a MathType equation
3. Select the equation and add a comment
4. Remove the equation
5. Undo

✔️ Expected result

Removal is undone, equation appears again together with comment

❌ Actual result

Editor crashes:

[Error] Unhandled Promise Rejection: TypeError: null is not an object (evaluating 'i[Hc("0x4")]')
	Uc (ckeditor.js:6:26826)
	isValidTarget (ckeditor.js:5:89529)
	(anonymous function) (ckeditor.js:5:79722)
	attachTo (ckeditor.js:5:86490)
	(anonymous function) (ckeditor.js:6:32100)
	promiseReactionJob
	parseFromString
	_toDom (ckeditor.js:5:196200)
	toView (ckeditor.js:5:196108)
	(anonymous function) (ckeditor.js:6:24486)
	view (ckeditor.js:6:24555)
	(anonymous function) (ckeditor.js:5:291919)
	fire (ckeditor.js:5:34727)
	_testAndFire (ckeditor.js:5:291210)
	convertInsert (ckeditor.js:5:288370)
	convertChanges (ckeditor.js:5:287688)
	(anonymous function) (ckeditor.js:5:301202)
	change (ckeditor.js:5:281283)
	(anonymous function) (ckeditor.js:5:301159)
	fire (ckeditor.js:5:34727)
	_handleChangeBlock (ckeditor.js:5:347976)
	_runPendingChanges (ckeditor.js:5:365243)
	enqueueChange (ckeditor.js:5:362252)
	execute (ckeditor.js:5:420128)
	(anonymous function) (ckeditor.js:5:30691)
	fire (ckeditor.js:5:34727)
	execute (ckeditor.js:5:303502)
	execute (ckeditor.js:5:367251)
	(anonymous function) (ckeditor.js:5:422748)
	fire (ckeditor.js:5:34727)
	(anonymous function) (ckeditor.js:5:25240)
	n (ckeditor.js:5:158417)
	fire (ckeditor.js:5:34727)
	i (ckeditor.js:5:165410)

📃 Other details

• Browser: Safari

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

The upcoming CKEditor 5 release contains a change in style processor that will break the MathType plugin. It causes instant crash with:

mathtype.js:66 TypeError: Cannot read property 'stylesProcessor' of undefined
    at new h (element.js:114)
    at b.domToView (domconverter.js:430)
    at b.domChildrenToView (domconverter.js:466)
    at domChildrenToView.next (<anonymous>)
    at b.domToView (domconverter.js:445)
    at o.toView (htmldataprocessor.js:79)
    at plugin.js:383
    at view (plugin.js:370)
    at xt.e.on.priority (downcasthelpers.js:654)
    at xt.fire (emittermixin.js:209)

The breaking changes are listed in the "StylesProcessor is no longer singleton" pull request.

Tested on new version, branch ckeditor5-demo

Steps to reproduce:

• add MathType formula as an item on TodoList

• Chrome/Safari version: press left arrow or select formula and press space

  Firefox version: just press space after adding formula

There is also a different way to reproduce this error:

• add MathType formula as an item on TodoList
• place the caret just before the formula and try to type

Result:

 Uncaught CKEditorError: view-writer-invalid-range-container
 at validateRangeContainer (http://localhost:5500/dist/bundle.js:39157:9)
 at DowncastWriter.remove (http://localhost:5500/dist/bundle.js:37946:3)
 at DowncastDispatcher.<anonymous> (http://localhost:5500/dist/bundle.js:9286:40)
 at DowncastDispatcher.fire (http://localhost:5500/dist/bundle.js:77176:30)
 at DowncastDispatcher.convertRemove (http://localhost:5500/dist/bundle.js:8399:8)
 at DowncastDispatcher.convertChanges (http://localhost:5500/dist/bundle.js:8325:10)
 at http://localhost:5500/dist/bundle.js:7394:29
 at View.change (http://localhost:5500/dist/bundle.js:47808:27)
 at Document.EditingController.listenTo.priority (http://localhost:5500/dist/bundle.js:7393:14)
 at Document.fire (http://localhost:5500/dist/bundle.js:77176:30)

📝 Provide detailed reproduction steps (if any)

Original issue: ckeditor/ckeditor5#6494

1. Open editor with MathType
2. Turn off internet connection
3. Click MathType icon on the toolbar

✔️ Expected result

MathType window opens up, you can add some equation.

❌ Actual result

App crashes:

Uncaught TypeError: Cannot read property 'nodeType' of null
    at com.wiris.editor.formula.FormulaModel.vk2.com.wiris.editor.formula.FormulaModel.vg5 (editor?lang=en&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at com.wiris.editor.EditorModel.vk2.com.wiris.editor.EditorModel.serviceAnswerReceived (editor?lang=en&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)
    at XMLHttpRequest.http.onreadystatechange (editor?lang=en&stats-editor=CKEditor5&stats-mode=xml&stats-version=7.14.0.1421:1)

When you then try to insert an equation, you get next error:

Uncaught Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://www.wiris.net/demo/plugins/app/showimage?lang=en&metrics=true&centerbaseline=false&formula=d41d8cd98f00b204e9800998ecf8427e&version=7.14.0.1421'.
    at Function.getUrl (serviceprovider.js:192)
    at Function.getService (serviceprovider.js:211)
    at Function.createShowImageSrc (parser.js:343)
    at Function.mathmlToImgObject (parser.js:62)
    at Function.parseMathmlToImg (parser.js:469)
    at Function.initParseSaveMode (parser.js:166)
    at Function.initParse (parser.js:149)
    at plugin.js:390
    at view (plugin.js:378)
    at As.t.on.priority (downcasthelpers.js:654)

If you then turn on the internet and try to add an equation, you get third error:

Uncaught TypeError: Cannot read property 'is' of undefined
    at nr.viewToDom (domconverter.js:205)
    at Yw.insertFormula (integration.js:250)
    at Yw.updateFormula (integrationmodel.js:321)
    at jw.submitAction (contentmanager.js:332)
    at Uw.submitAction (modal.js:268)

📃 Other details

• Browser: any
• OS: any

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Steps to reproduce the issue
1.Open wiris editor
2.Open image dialog box or preview box or media
3. The wiris editor comes on top of that.
Attaching images

Hi,
Am looking forward to add wiris.com/en/mathtype to CKEditor 5. . . Below code is working great, it would be helpful if someone could tell me what more code should be added to below code so that Mathtype will appear in Toolbar beside bold or italic. . .

/*
 Equation Editor Plugin for CKEditor v4
 Version 1.4

 This plugin allows equations to be created and edited from within CKEditor.
 For more information goto: http://www.codecogs.com/latex/integration/ckeditor_v4/install.php

 Copyright CodeCogs 2006-2013
 Written by Will Bateman.
*/
CKEDITOR.plugins.add( 'eqneditor', {
	availableLangs:{en:1},
	lang : "en",
	requires: [ 'dialog' ],
	icons: "eqneditor",

	init : function(editor)
	{
	  var host='latex.codecogs.com';
	  var http=('https:' == document.location.protocol ? 'https://' : 'http://');

		// First make sure we have loaded the necessary scripts
  	CKEDITOR.scriptLoader.load( [
		http+host+'/js/eq_config.js',
		http+host+'/js/eq_editor-lite-17.js',
		]);

		// Load Additional CSS
		var fileref=document.createElement("link");
		fileref.setAttribute("rel", "stylesheet");
		fileref.setAttribute("type", "text/css");
		fileref.setAttribute("href", http+host+'/eqneditor/css/equation-embed.css');
		document.getElementsByTagName("head")[0].appendChild(fileref);

		var pluginCmd='eqneditorDialog';

		// Add the link and unlink buttons.
		editor.addCommand(pluginCmd, new CKEDITOR.dialogCommand(pluginCmd,
			{
				allowedContent: 'img[src,alt]',
				requiredContent: 'img[src,alt]'
			})
		);

		CKEDITOR.dialog.add(pluginCmd, this.path+"dialogs/eqneditor.js");

		editor.ui.addButton( 'EqnEditor', {
			label : editor.lang.eqneditor.toolbar,
			command : pluginCmd,
			icon: this.path + 'icons/eqneditor.png',
			toolbar: 'insert'
		});

		// add context-menu entry
		if (editor.contextMenu)
		{
			editor.addMenuGroup(editor.lang.eqneditor.menu);
			editor.addMenuItem( 'eqneditor', {
				label : editor.lang.eqneditor.edit,
				icon : this.path + 'icons/eqneditor.png',
				command : pluginCmd,
				group : editor.lang.eqneditor.menu
			});

			// if the selected item is image of class 'mathImg',
			// we shold be interested in it
			editor.contextMenu.addListener( function(element) {
				var res={};
				if (element.getAscendant('img', true))
				{
					var sName = element.getAttribute('src').match( /(gif|svg)\.latex\?(.*)/ );
					if(sName!=null)
					{
						res['eqneditor'] = CKEDITOR.TRISTATE_OFF;
						return res;
					}
				}
			});

		}

		editor.on( 'doubleclick', function(evt)
		{
			var element = evt.data.element;
			if (element && element.is('img'))
			{
				var sName = element.getAttribute('src').match( /(gif|svg)\.latex\?(.*)/ );
				if(sName!=null)
				{
					evt.data.dialog = pluginCmd;
					evt.cancelBubble = true;
					evt.returnValue = false;
					evt.stop();
				}
			}
		}, null, null, 1);

	}
});

Continuation of ckeditor/ckeditor5#9001

Original issue - ckeditor/ckeditor5#2073.

Math appears as an image in the editor, and converting to HTML will be mathml, which I hope will not be converted

replicable on https://codesandbox.io/s/tinymcevue-forked-tr0yo?file=/src/tinymce.js

1. Create a math formula using "Left Superscript"
2. After my system save the content
   content saved: <math xmlns=\"http://www.w3.org/1998/Math/MathML\"><mmultiscripts><mi>C</mi><mprescripts></mprescripts><none></none><mn>13</mn></mmultiscripts></math>
3. content was reload into the editor component but the math fomula was displayed incorrectly.

correct display

incorrect display

Original issue: ckeditor/ckeditor5#8038

📝 Provide detailed reproduction steps (if any)

1. Add MathType equation as last element in the editor
2. Try to navigate to the end of the equation and press enter

✔️ Expected result

❌ Actual result

📃 Other details

• Browser: Firefox

If you'd like to see this fixed sooner, add a 👍 reaction to this post.

Provide detailed reproduction steps (if any)

Originally reported at ckeditor/ckeditor4#4279

Use sample in docs:
https://ckeditor.com/docs/ckeditor4/latest/examples/mathtype.html

1. launch url above

2. click on source button, to show code view

3. click on source again, to show WYSIWYG view.

4. click on source button, to show code view

5. click on source again, to show WYSIWYG view.

Expected result

show WYSIWYG view and able to launch mathtype

Actual result

script error

can't launch mathtype plugin

• Browser: …

• OS: Windows 10

• CKEditor version: 4 (latest)

• Installed CKEditor plugins: wiris editor/mathtype

Focus is not coming back to TinyMCE editor/lost when user does not type anything in the MathType editor and clicks cancel button.

If you try to use the mathtype-ckeditor5 plugin in an editor with spans that do not have class="ck-math-widget, the plugin will try to upcast them anyways.

So to repro, create a simple custom plugin with the following conversion:

this.editor.conversion.for('upcast').elementToElement({
  view: {
    name: 'span',
    attributes: {
      'data-role': 'not-math'
    }
  },
  model(viewElement, modelWriter) {
    return modelWriter.createElement('span');
  }
});

If you install both plugins and try to call editor.setData('<p>Here is an <span>error</span>.</p>); you end up with an error of:

 viewElement.getChild(...).getAttribute is not a function

Original issue - ckeditor/ckeditor5#5765.

Steps to reproduce

1. Create Classic CKEditor 5 with MathType plugin
2. In HTML page insert below code and run it in a browser:

ClassicEditor.create( document.querySelector( '#editor' ) )
	.then( editor => {
		window.editor = editor;
		window.editor.setData( 
			"<p style=\"margin-top:12pt; text-align:justify\"> <math xmlns=\"http://www.w3.org/1998/Math/MathML\">  <msub>   <mrow>    <mi mathcolor=\"000000\">     P    </mi>   </mrow>   <mrow>    <mi mathvariant=\"italic\" mathcolor=\"000000\">     fs    </mi>   </mrow>  </msub> </math></p> <p style=\"margin-top:12pt; text-align:justify\">  </p>"
		 );
	} ).catch( err => {
		console.error( err.stack );
	} );

NOTE: Please also read Other details section.

Expected result

Content should be set and no error should be thrown.

Actual result

Content isn't set and there is error being thrown: CKEditorError: view-position-after-root: You cannot make position after root

Other details

This error gets only thrown when MathType plugin is used. If you remove the MathType from your build, editor will process pasted content without any issues.

Original issue: ckeditor/ckeditor5#6473

Steps to reproduce:

1. Open editor with MathType and Comment plugins
2. In empty line add a MathType equation
3. Select the equation and add a comment
4. Click after the equation and try to type

Expected result:

Cursor shows up, you are able to type

Actual result:

Cursor is not showing up, you can't type. In order to see it and type, you have to click on equation and press arrow-right:

Other details

• Browser: Firefox, works fine in other browsers

Provide detailed reproduction steps (if any)

Originally reported at: ckeditor/ckeditor4#4280

Creating new issue from previous issue.
Reference:
#3817

1. Open https://ckeditor.com/docs/ckeditor4/latest/examples/mathtype.html

2. Handle 'change' event of editor, paste in dev console:

CKEDITOR.instances.editor1.on( 'change', function() { console.log( 'change event data', this.getData() ); } );

1. Delete all content in ckeditor

2. Launch mathtype from the editor

3. Add math formula and click insert

4. Editor 'change event is fired, when you click insert button on mathtype.

5. call editor.getData(), returns empty result

6. Formula is is inserted into ckeditor.

Expected result

when call step 7 above, expected to get the mathml code as data

Actual result

returns nothing, believe event get fired before data is inserted into ckeditor and not after.

Other details

• Browser: Chrome(latest)

• OS: Windows 10

• CKEditor version: latest

• Installed CKEditor plugins: MathType

Tested on new version, branch ckeditor5-demo

Steps to reproduce:

• add a formula
• click 'Insert Code Block' in the toolbar

Result:

Uncaught TypeError: Cannot read property 'match' of undefined
  at getLeadingWhiteSpaces (utils.js:88)
  at getLastOutdentableSequenceRange (outdentcodeblockcommand.js:136)
  at outdentcodeblockcommand.js:107
  at Array.some (<anonymous>)
  at OutdentCodeBlockCommand._checkEnabled (outdentcodeblockcommand.js:106)
  at OutdentCodeBlockCommand.refresh (outdentcodeblockcommand.js:40)
  at Document.<anonymous> (command.js:111)
  at Document.fire (emittermixin.js:209)
  at Document._handleChangeBlock (document.js:318)
  at Model._runPendingChanges (model.js:787)

Original issue - ckeditor/ckeditor5#2013.

Steps to reproduce

1. Use an editor with mathtype and table plugins.
2. Add a 2x2 table.
3. Call editor.getData().

Expected result

Table markup without brs.

<table>
	<tbody>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td>&nbsp;</td>
		</tr>
	</tbody>
</table>

Actual result

Returned table has some extra brs in it.

<table>
	<tbody>
		<tr>
			<td><br data-cke-filler="true"></td>
			<td><br data-cke-filler="true"></td>
		</tr>
		<tr>
			<td><br data-cke-filler="true"></td>
			<td><br data-cke-filler="true"></td>
		</tr>
	</tbody>
</table>

Replicable in https://demo.wiris.com/integrations/tinymce/

1. make changes to richtext content
2. undo button is enabled
3. click on undo button

Expected result
redo button should be enabled
Actual result
redo button is still disabled

Hi There, We were facing this linked issue where we need some help from you guys.

tinymce/tinymce#6271 (comment)

Tested on new version, branch ckeditor5-demo

I'm not able to copy&paste a formula, but able to cut. Moreover, if you add Image plugin, the formula will be copied, but pasted as an image.

Hi.
I have small issue about placeholder in popup. Is there a way to set placeholder there?

Thanks.

I am trying to test this plugin with ckeditor5 by creating a local index.html file and loading it using parcel-bundler. I am getting the following error:

My sample html code is below:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CKEditor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/15.0.0/classic/ckeditor.js"></script>
    <script src="../src/plugin.js"></script>
</head>

<body>
    <textarea name="content" id="editor">This is some sample content.</textarea>
    <script>
        ClassicEditor
            .create(document.querySelector('#editor'), {
                plugins: ['MathType'],
                toolbar: {
                    items: [
                        'MathType',
                        'ChemType',
                    ]
                },
            })
            .then(editor => {
                console.log(editor);
            })
            .catch(error => {
                console.error(error);
            });
    </script>
</body>

</html>

Please advice, how can I test this with ckeditor5 locally such that I can step through the code.

There is a issue while binding the data with ng-model in angular js project when mathtype plugin used in ckeditor, It breaks the whole code and data are not shown on the ckeditor. Is it unable to render the data or equation while using mathtype plugin in ckeditor ?
I'm using ckeditor 4.14 and mathtype plugin with 7.16 version

Hello, I used mathtype-ckeditor5 very well.

However, when I insert a lot of quantity about >100, I was so late on renderring due to synchronized method.

So I tried I get images by using asynchronized method in this page's way

but I think, this page work on ckeditor4 or lower version.
If my method is wrong, please let me know the method in detail.

Otherwise, I want to know another way about asynchronized load in ckeditor5-mathtype.

1. Go to https://ckeditor.com/docs/ckeditor5/latest/features/math-equations.html#demo
2. Press the "Insert math equation" button.

Expected:

The UI shows up providing a minimal UX for the user to create a new equation.

Actual:

Instead of the math UI, there's an overlay that cover the entire web page and there's no way to close it and go back to the editing. It breaks the editing experience in the editor.