[TW5] Is there No way to spell check with the Code Mirror Plugin?

[Jeff Vance]

I did a search and saw this question come up several times in the past, but there has never been a clear answer. The browser's spell check does not work when using the Code Mirror plugin. In the past threads, the solution was always to disable Code Mirror!  To me, that is not really a solution. I'd rather keep Code Mirror and just try to be more careful with my spelling.  But I keep noticing typos when I go back to read things later.  Is there really no way to get the spell check to work again?

[PMario]

On Tuesday, March 28, 2017 at 6:48:07 PM UTC+2, Jeff Vance wrote:

I did a search and saw this question come up several times in the past, but there has never been a clear answer. The browser's spell check does not work when using the Code Mirror plugin. In the past threads, the solution was always to disable Code Mirror!  To me, that is not really a solution. I'd rather keep Code Mirror and just try to be more careful with my spelling.  But I keep noticing typos when I go back to read things later.  Is there really no way to get the spell check to work again?

That's not as simple as it seems. javascript has no access to the built in browser spell-checker. That's why you'd need to include big dictionaries and an additional cm-plugin. (if there is one!) ...

But I think, it should be possible to create a "preview" mode, that opens the "raw" text editor. The problem is, that you still would need to type in the cm edit area to fix the text.

have fun!
mario

[Jeff Vance]

I did some experimenting and google searching and found what seems like kind of a hack to get spell check sort-of working. But it is awkward.  I found something that said you could force Firefox to spell check everything on any page with a bookmark that has this:

javascript:document.body.contentEditable='true';%20document.designMode='on';%20void%200

I tried it and it actually works...but the spelling correction while in the editor doesn't actually change the text when you save the tiddler.  Also the "designMode=on" seems to be award in an editor since you have 2 cursors( one where the spell check and one for the editor). So I removed the designMode=on and it is a little better. You can't auto-replace, but it at least underlines all the misspelled words so you can manually type them. Then I guess maybe use a second bookmark to toggle off the spell check.  Definitely not ideal, but it kind of works.

[Alex D]

I implemented the open-source Hunspell Spell Checker for a project using codemirror, using a back-end service. There is also a frontend implementation that I haven't tried yet, https://github.com/kwonoj/hunspell-asm. 

On Tuesday, March 28, 2017 at 6:48:07 PM UTC+2, Jeff Vance wrote:

[TonyM]

Folks,

I would like to open this up again. 

Code Mirror on both latest FireFox and Chrome seems to not operate within the codeMirror text editor (plugins). FireFox is my preferred Browser for many reasons, although I use both. 

• I use the browsers spell checker in both cases, and whilst they leave a little to be desired is there a solution path to this problem?
  
• Perhaps there are better in browser spell checkers, or can we extend the code-mirror plugins to include a spell checking module?
  

Perhaps a worst case scenario would be including the dictionary in a tiddlywiki plugin, but if it was in "selected" tiddlywikis and word lookup could take place accessible it could be a boon to the authors with in our number as well as those that love playing with language. I remember pre internet days the joy of using an equivalent of regex to find the longest wort beginning "auto" or psycho was a lot of fun, or tiddlywiki could be used for scrabble and cross word builders and more.

Any solutions/Thoughts?

Regards

Tony

[TonyM]

I tried a third party plugin https://languagetool.org/#firefox_chrome , and as I expected the following was returned

No text found
You don't seem to be inside a text area. If you're using an online office software, this add-on might not work there. Please check if the online office supports add-ons which provide support for LanguageTool.

I expected with Code mirrors fancy line numbers and highlight it would not be a "text area"

I Downloaded the Desktop version

C:\Data\LanguageTool-4.3\languagetool.jar Need to copy and paste to this Java App

Perhaps it could use WithExEditor (With External Editor addon in fire fox) not tried, but I want that to open notepad++

UPDATE: Discovered notepad++ can spell check, but you have to select the text, it cant identify all the text in the current text field because it is not a simple text area.

Regards

Tony

[PMario]

On Thursday, November 8, 2018 at 12:07:33 PM UTC+1, TonyM wrote:

I tried a third party plugin https://languagetool.org/#firefox_chrome , and as I expected the following was returned

Hi,

Just to be sure.

If you look at the homepage, open the developer panel and check the network communication, you'll see, that there is a POST command. This means all your text will be sent to a 3rd party server.

This is also true, by default for the browser addOn, as the addon info shows.

-mario

[TonyM]

MArio,

Yes, I looked at the desktop version in part because of that.

I was hopping to find a way for it to interact locally with the browser. There is not.

Regards

Tony

[TonyM]

Bump

This is proving to be a serious limitation to doing business and writing copy in TiddlyWiki as the CodeMirror plugins are essential to full editor control yet we ca't spell check.

Regards

Tony

On Thursday, November 8, 2018 at 9:39:32 PM UTC+11, TonyM wrote:

[@TiddlyTweeter]

As far as I understand it, from reading Codemirror groups, this spell-check issue is not a specific TW plugin issue, its related to how Codemirror works. The normal type of entry panel that allows browser spellcheck to run is not used. Something like that, I think.

J.

[TonyM]

Joseph,

Yes most opperate on text areas. I will look into either toggling code mirror plugins - plural, or somehow enabling a way to activate the standard editor.

My current workaround is to use a different wiki.

Regards
Tony

[Jeremy Ruston]

Another possible solution would be to add a new editor preview pane that contains a plain text editor so that you could switch to it quicklt to perform spell checking and correction.

Create a new tiddler called $:/_EditorPreview tagged $:/tags/EditPreview, add a “caption” field containing “Spell check”, and the following content:

<$edit-text tiddler=<<currentTiddler>> class="tc-spell-check-preview"/>

<style>

.tc-spell-check-preview {width:100%;}

</style>

Then select “Spell check” as the editor preview.

In my tests, I needed to click on the preview editor textarea in order to activate spell checking and make the dotted underlines visible.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/22e55160-62cc-4cca-9d99-76b8906ad5fd%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mohammad]

Hello Jeremy!

 This work for me! Thank you.

Is it possible to have the spell check in Tiddlydesktop?

/Mohammad

[PMario]

Hi,

IMO this should be part of the code-mirror core plugins! @Jeremy ... It would be nice if you could add it to the next version.

-m

[TonyM]

Jeremy,

This is a fairly good solution, however I am now editing tiddler content as a text field (from another tiddler)

<$transclude tiddler="$:/core/ui/EditTemplate/body/editor"/>
And preview mode will not work there

Even if it did I would much prefer preview mode to appear above or below the edit field as I am writing a lot of "copy" and would prefer to see it in an un-squashed horizontal perspective

After doing as you suggested I found the preview will not show the top line fully and there is no scroll bar.

I found the following works bt still with the above problems

{{||$:/_EditorPreview}}

Even directly

<$edit-text tiddler=<<currentTiddler>> class="tc-spell-check-preview"/><style>
.tc-spell-check-preview {width:100%;}
</style>

Though it would be better if we got the option for the Editor Toolbar to appear, and to allow scrolling.

Should I submit a request for horizontal above and below to be Preview Options? This would make it resemble WikiMedia and other Wikis a bit more and support writers.

Personally I would be happy to hide the CodeMirror editor while using the Spell Check view. This should be easy for me the way I am doing it through an edit fields method, but other users without such a facility will not be able to see it in horozontal format.

Thanks and Regards

Tony

[BurningTreeC]

spellchecking within the codemirror is possible, I've made a proof of concept here: http://codemirror-spellcheck.tiddlyspot.com/

the question is if it's worth the work, because of the size of the dictionary which is around 1mb of size and stored in a single tiddler

BTC

[Jeremy Ruston]

Hi Tony

This is a fairly good solution, however I am now editing tiddler content as a text field (from another tiddler)

You mean you’re not using the regular view template here? In that case,  I should have thought you can just add a secondary editor yourself.

Even if it did I would much prefer preview mode to appear above or below the edit field as I am writing a lot of "copy" and would prefer to see it in an un-squashed horizontal perspective

I don’t think the core need to directly supporting positioning the preview pane below the edit pane, as it seems an unusual requirement and can be accomplished by CSS.

After doing as you suggested I found the preview will not show the top line fully and there is no scroll bar.

Can you show a screenshot?

I found the following works bt still with the above problems

{{||$:/_EditorPreview}}

Even directly

<$edit-text tiddler=<<currentTiddler>> class="tc-spell-check-preview"/><style>
.tc-spell-check-preview {width:100%;}
</style>

Where are you putting those fragments? How is their behaviour different than you expected?

Though it would be better if we got the option for the Editor Toolbar to appear, and to allow scrolling.

What do you mean by the editor toolbar appearing? My tweak should have affected the editor toolbar.

Should I submit a request for horizontal above and below to be Preview Options? This would make it resemble WikiMedia and other Wikis a bit more and support writers.

I’m not sure what horizontal lines you mean here.

Personally I would be happy to hide the CodeMirror editor while using the Spell Check view. This should be easy for me the way I am doing it through an edit fields method, but other users without such a facility will not be able to see it in horozontal format.

I’m sorry I’m not following what you’re asking/recommending here?

Best wishes

Jeremy

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3f3c9b41-f3e7-45c7-83f7-cb44e860e7b9%40googlegroups.com.

[TonyM]

Jeremy,

Thanks for your response. My response in line.

To summarise I would like

• To make the spell check preview show the top line
• For users in General (place the preview above or below the edit rather than to the right) like wikipedia
  Or how to do this with css
• Be able toggle codemirror to the default editor 
• or know how to invoke the default editor while code mirror is active

On Friday, November 16, 2018 at 1:36:06 AM UTC+11, Jeremy Ruston wrote:

Hi Tony

This is a fairly good solution, however I am now editing tiddler content as a text field (from another tiddler)

You mean you’re not using the regular view template here? In that case,  I should have thought you can just add a secondary editor yourself.

 I am using the regular edit/view template sometimes; this is how it looks, note the top line in the spell check view. I expected a scroll for long tiddler but I see it expands automatically. Could be an issue for long tiddlers.

 

Even if it did I would much prefer preview mode to appear above or below the edit field as I am writing a lot of "copy" and would prefer to see it in an un-squashed horizontal perspective

I don’t think the core need to directly supporting positioning the preview pane below the edit pane, as it seems an unusual requirement and can be accomplished by CSS.

This is not unusual, WikiPedia/WikiMedia editors do this every day, If it can be accomplished by CSS can you tell me how and would it not be simple to add a toggle?

 

After doing as you suggested I found the preview will not show the top line fully and there is no scroll bar.

Can you show a screenshot?

example above (1st image) 

I found the following works but still with the above problems

{{||$:/_EditorPreview}}

Even directly

<$edit-text tiddler=<<currentTiddler>> class="tc-spell-check-preview"/><style>
.tc-spell-check-preview {width:100%;}
</style>

Where are you putting those fragments? How is their behaviour different than you expected?

In addition to using the standard edit view, I have an edit-fields solution which allows me to edit the fields in the current tiddler from the view template, and using field definitions, including the text field. This allows me to treat tiddlers as forms and fields with rich editing tools like date selection, time stamps, colour and image selection and more/

For example

View Mode

The above tiddler has being folded, to show only my edit fields view, delivered via a view template addon, and designed to allow edit current tiddler indirectly as required.

And Edit mode

The above edit mode is achieved using

<$transclude tiddler="$:/core/ui/EditTemplate/body/editor"/>

The Preview button refuses to work in this edit view

Code Mirror has taken over the use of $:/core/ui/EditTemplate/body/editor

Here is the Spell check view added to my edit fields tool (view mode) using

<$transclude field="text" mode="block"/>
<$edit-text tiddler=<<currentTiddler>> class="tc-spell-check-preview"/><style>
.tc-spell-check-preview {width:100%;}
</style>

Notice how nice it is to see the text (Preview) above the "Spell check editor" like in WikiPedia, this is more so with full text as in prose.

Here I have no access to the Editor toolbar.

 

Though it would be better if we got the option for the Editor Toolbar to appear, and to allow scrolling.

What do you mean by the editor toolbar appearing? My tweak should have affected the editor toolbar.

See previous image and notes

Should I submit a request for horizontal above and below to be Preview Options? This would make it resemble WikiMedia and other Wikis a bit more and support writers.

I’m not sure what horizontal lines you mean here.

As above seeing the result with the editor below the view, or in the case of the standard preview imaging the edit mode along side the spell check preview.

Personally I would be happy to hide the CodeMirror editor while using the Spell Check view. This should be easy for me the way I am doing it through an edit fields method, but other users without such a facility will not be able to see it in horozontal format.

I’m sorry I’m not following what you’re asking/recommending here?

As you can see above, with my edit fields solution I can view the Preview and the view/Edit window one above the other, I can choose to show the Edit above the spell check preview (not illustrated in this email) but other users without such a facility will not be able to see it in horizontal format.

Thanks for considering this

Tony

[Jeremy Ruston]

Hi Tony

Just to reply briefly to your summary

• 
  To make the spell check preview show the top line

That looks like a problem with your CSS, did you not see that problem before trying out the editor? Does it happen regardless of whether the editor is set to a fixed height?

• For users in General (place the preview above or below the edit rather than to the right) like wikipedia
  Or how to do this with css

Try the following CSS:

html body.tc-body .tc-tiddler-frame .tc-tiddler-preview .tc-edit-texteditor {

    width: 100%;

}

html body.tc-body .tc-tiddler-preview-preview {

    float: none; 

    width: 100%;

}

• Be able toggle codemirror to the default editor 

You can disable CodeMirror by disabling the plugin.

• or know how to invoke the default editor while code mirror is active

Perhaps I’m misunderstanding, but an ordinary edit-text widget will not invoke codemirror:

<$edit-text tiddler="$:/SiteTitle”/>

Best wishes

Jeremy.

On Friday, November 16, 2018 at 1:36:06 AM UTC+11, Jeremy Ruston wrote:

Hi Tony

This is a fairly good solution, however I am now editing tiddler content as a text field (from another tiddler)

You mean you’re not using the regular view template here? In that case,  I should have thought you can just add a secondary editor yourself.

 I am using the regular edit/view template sometimes; this is how it looks, note the top line in the spell check view. I expected a scroll for long tiddler but I see it expands automatically. Could be an issue for long tiddlers.

<2018-11-16_12-08-48.jpg>

 

Even if it did I would much prefer preview mode to appear above or below the edit field as I am writing a lot of "copy" and would prefer to see it in an un-squashed horizontal perspective

I don’t think the core need to directly supporting positioning the preview pane below the edit pane, as it seems an unusual requirement and can be accomplished by CSS.

This is not unusual, WikiPedia/WikiMedia editors do this every day, If it can be accomplished by CSS can you tell me how and would it not be simple to add a toggle?

<2018-11-16_12-13-27.jpg>

 

After doing as you suggested I found the preview will not show the top line fully and there is no scroll bar.

Can you show a screenshot?

example above (1st image) 

I found the following works but still with the above problems

{{||$:/_EditorPreview}}

Even directly

<$edit-text tiddler=<<currentTiddler>> class="tc-spell-check-preview"/><style>
.tc-spell-check-preview {width:100%;}
</style>

Where are you putting those fragments? How is their behaviour different than you expected?

In addition to using the standard edit view, I have an edit-fields solution which allows me to edit the fields in the current tiddler from the view template, and using field definitions, including the text field. This allows me to treat tiddlers as forms and fields with rich editing tools like date selection, time stamps, colour and image selection and more/

For example

View Mode

<2018-11-16_12-18-56.jpg>

The above tiddler has being folded, to show only my edit fields view, delivered via a view template addon, and designed to allow edit current tiddler indirectly as required.

And Edit mode

<2018-11-16_12-23-47.jpg>

The above edit mode is achieved using

<$transclude tiddler="$:/core/ui/EditTemplate/body/editor"/>

The Preview button refuses to work in this edit view

Code Mirror has taken over the use of $:/core/ui/EditTemplate/body/editor

Here is the Spell check view added to my edit fields tool (view mode) using

<$transclude field="text" mode="block"/>
<$edit-text tiddler=<<currentTiddler>> class="tc-spell-check-preview"/><style>
.tc-spell-check-preview {width:100%;}
</style>

<2018-11-16_12-34-20.jpg>

Notice how nice it is to see the text (Preview) above the "Spell check editor" like in WikiPedia, this is more so with full text as in prose.

Here I have no access to the Editor toolbar.

 

Though it would be better if we got the option for the Editor Toolbar to appear, and to allow scrolling.

What do you mean by the editor toolbar appearing? My tweak should have affected the editor toolbar.

See previous image and notes

Should I submit a request for horizontal above and below to be Preview Options? This would make it resemble WikiMedia and other Wikis a bit more and support writers.

I’m not sure what horizontal lines you mean here.

As above seeing the result with the editor below the view, or in the case of the standard preview imaging the edit mode along side the spell check preview.

Personally I would be happy to hide the CodeMirror editor while using the Spell Check view. This should be easy for me the way I am doing it through an edit fields method, but other users without such a facility will not be able to see it in horozontal format.

I’m sorry I’m not following what you’re asking/recommending here?

As you can see above, with my edit fields solution I can view the Preview and the view/Edit window one above the other, I can choose to show the Edit above the spell check preview (not illustrated in this email) but other users without such a facility will not be able to see it in horizontal format.

Thanks for considering this

Tony

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/10716295-b804-4a17-8f08-1997268a6430%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

<2018-11-16_12-08-48.jpg><2018-11-16_12-13-27.jpg><2018-11-16_12-18-56.jpg><2018-11-16_12-23-47.jpg><2018-11-16_12-34-20.jpg>

[TonyM]

BTC,

Thanks for that example, it would be hhelpful, however being able to lookup the word remains a feature this does not provide. Actually if the dictionary exists within a wiki it makes sense to extend the functionality into word lookup and other features. However thanks for this example

Tony

[TonyM]

Jeremy,

Thanks for your help, I think I can piece the solution together.

There is something "now" wrong with the CSS, the editor toolbar has "fallen", I will need to investigate this further.

Of course <$edit-text tiddler="$:/SiteTitle”/> does not invoke code mirror, nor does it provide the Toolbar.

I was hoping there was a way to use <$transclude tiddler="$:/core/ui/EditTemplate/body/editor"/>

or a similar transclusion to invoke the default editor, and another to invoke the codeMirror editor.

I will build a replacement "template" and use that.

Thanks again

Tony