Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#51 2015-10-27 06:10:19

phiw13
Plugin Author
From: Japan
Registered: 2004-02-27
Posts: 2,116
Website

Re: Improved Text Editor Capability

wet wrote #296226:

</rant>

Thank you, Robert. Same reasoning as yours here in the rain.


Where is that emoji for a solar powered submarine when you need it ?

Offline

#52 2015-10-27 07:27:54

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,366
Website

Re: Improved Text Editor Capability

Another consideration we need to think about is where the formatting bar would appear in the admin side. Obviously the write body textarea is a given, but there is also excerpt, and potentially any other field that accepts textile/markdown (including the custom field proposal at v4.8).

This is another of many reasons why I categorically don’t want a wysiwyg such as CKeditor. Even Trix is probably unsuitable for core after some testing of it (and not least because it doesn’t support markdown or textile yet and may never do).

I’ll say again, a formatting bar helper that gives shortcuts to common textile/markdown is my preferred route. You can also then omit the textile help panel and just provide a link to txtstyle or whatever – saving some panel clutter.

Also, after testing plenty of inline helpers (the ones that contextual popup when you highlight a word or sentence), I’ve yet to find one that plays nicely with iOS (which already has its own native popup UI that tends to then get messed up). If someone has found one they think works let me know, but for my money the standard toolbar above textarea works safest and is simple to understand from UX perspective, so I’m leaning towards that UI.

Offline

#53 2015-10-27 10:21:46

etc
Developer
Registered: 2010-11-11
Posts: 3,875
Website

Re: Improved Text Editor Capability

Destry wrote #296214:

The plugin requires adding CodeMirror to the root in its own folder, which is baggage, of course…

This. Judge by yourself: go to codemirror.net/mode/textile/index.html and tape something like

h2. Textile test

I enjoy _Textile_ very much!

Now, right-click it and inspect the code behind the syntax highlighting:

<div class="CodeMirror cm-s-default">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 43px; left: 258px;">
<textarea tabindex="0" spellcheck="false" autocapitalize="off" autocorrect="off" style="position: absolute; padding: 0px; width: 1px; height: 1em; outline: medium none;" wrap="off"></textarea>
</div>
<div style="bottom: 17px;" cm-not-content="true" class="CodeMirror-vscrollbar">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div style="right: 17px; left: 34px;" cm-not-content="true" class="CodeMirror-hscrollbar">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div style="height: 17px; width: 17px;" cm-not-content="true" class="CodeMirror-scrollbar-filler"></div>
<div cm-not-content="true" class="CodeMirror-gutter-filler"></div>
<div draggable="true" tabindex="-1" class="CodeMirror-scroll">
<div style="margin-left: 30px; margin-bottom: -17px; border-right-width: 13px; min-height: 67px; min-width: 231px; padding-right: 0px; padding-bottom: 0px;" class="CodeMirror-sizer">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: medium none;">
<div class="CodeMirror-measure">
<pre>x</pre>
<div class="CodeMirror-linenumber CodeMirror-gutter-elt">
<div>1</div>
</div>
</div>
<div class="CodeMirror-measure">
<pre class="CodeMirror-line"><span><span cm-text=""></span></span></pre>
</div>
<div style="position: relative; z-index: 1;"></div>
<div style="" class="CodeMirror-cursors">
<div style="left: 228px; top: 39px; height: 20px;" class="CodeMirror-cursor">&nbsp;</div>
</div>
<div style="" class="CodeMirror-code">
<div style="position: relative;">
<div style="left: -30px;" class="CodeMirror-gutter-wrapper">
<div style="left: 0px; width: 21px;" class="CodeMirror-linenumber CodeMirror-gutter-elt">1</div>
</div>
<pre class=" CodeMirror-line "><span><span class="cm-header cm-header-2">h2. Textile test</span></span></pre>
</div>
<div style="position: relative;">
<div style="left: -30px;" class="CodeMirror-gutter-wrapper">
<div style="left: 0px; width: 21px;" class="CodeMirror-linenumber CodeMirror-gutter-elt">2</div>
</div>
<pre class=" CodeMirror-line "><span><span cm-text=""></span></span></pre>
</div>
<div style="position: relative;">
<div style="left: -30px;" class="CodeMirror-gutter-wrapper">
<div style="left: 0px; width: 21px;" class="CodeMirror-linenumber CodeMirror-gutter-elt">3</div>
</div>
<pre class=" CodeMirror-line "><span>I enjoy <span class="cm-em">_Textile_</span> very much!</span></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="position: absolute; height: 13px; width: 1px; top: 67px;"></div>
<div style="height: 313px;" class="CodeMirror-gutters">
<div style="width: 29px;" class="CodeMirror-gutter CodeMirror-linenumbers"></div>
</div>
</div>
</div>

How can this mess be part of any core? The author did a great work, but it’s like playing ping-pong with a hockey cross. If one day some web language (CSS?) evolves enough to easily style parts of text, I will be two hands for syntax highlighting features in the core.

Offline

#54 2015-10-27 11:04:41

NicolasGraph
Plugin Author
From: France
Registered: 2008-07-24
Posts: 860
Website

Re: Improved Text Editor Capability

philwareham wrote #296231:

I’ll say again, a formatting bar helper that gives shortcuts to common textile/markdown is my preferred route. You can also then omit the textile help panel and just provide a link to txtstyle or whatever – saving some panel clutter.

So let’s include rah_textile_bar in the core… It already exists, it is clean, light, easy to use and could support Makdown. Then we could talk about a wysiwyg editor as a plugin?


Nicolas
Follow me on Twitter and GitHub!
Multiple edits are usually to correct my frenglish…

Offline

#55 2015-10-27 11:04:47

wet
Developer
From: Lenzing, Austria
Registered: 2005-06-06
Posts: 3,267
Website

Re: Improved Text Editor Capability

etc wrote #296236:

<div class="CodeMirror cm-s-default">...

Would you mind to expand on how this rather illegible soup of div elements affects your user experience besides aesthetical dismay? I don’t expect a large fraction of users to view source for the text entry area in their CMS as long as the published markup fulfills their needs.

I could think of just on reason: Performance degradations on mobile browsers and other underpowered hardware. OTOH, this will rectify itself in just a few months if we align our vision along the phone vendors’ claims that any current high-end phone offers desktop performance.

Offline

#56 2015-10-27 11:26:44

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,464
Website

Re: Improved Text Editor Capability

philwareham wrote #296231:

I’ll say again, a formatting bar helper that gives shortcuts to common textile/markdown is my preferred route. You can also then omit the textile help panel and just provide a link to txtstyle or whatever – saving some panel clutter.

+1 That was my #2, however it can best be done.

etc wrote #296236:

How can this mess be part of any core?

First of all, I’m not saying CodeMirror should be core. Never was. spf_writer is a plugin. Whether or not something like CodeMirror is ever added to core, it’s not for me to say. What I am saying is, if the same effect (syntax highlighting, or whatever it’s called) can be done somehow, it would be nice.

Judge by yourself: go to codemirror.net/mode/textile/index.html and tape something…

Why would I go there? I’m not using that site to write copy.

Here’s some actual copy in a local install using the plugin…

Here’s how it looks in the HTML preview of the admin-side:

<h3>Testing spf_writer</h3>

<p>Here I&#8217;m using <em>Textile</em>, and unlike the rainbow-colored treatment TextMate gives it, spf_writer uses a less innocuous color scheme: Black-bold for all headers (h1–h6), <strong>strong</strong>, and <b>bold</b>, of course. Black-italic for <em>emphasis</em> and <i>italic</i>, as you would expect. Red for lists&#8230;</p>

<ol>
    <li>both ordered</li>
</ol>

<ul>
    <li>and unordered</li>
</ul>

<p>And a metallic gold for <a href="http://domain.tld">links</a>, <code>inline code</code>, and</p>

<pre><code>block code</code></pre>

And here’s what is shown if I look at the page source in my browser (both Safari and Firefox):

Where’s all the extra soup ingredients? I’m a doing it wrong?

Offline

#57 2015-10-27 11:29:18

etc
Developer
Registered: 2010-11-11
Posts: 3,875
Website

Re: Improved Text Editor Capability

wet wrote #296240:

Would you mind to expand on how this rather illegible soup of div elements affects your user experience besides aesthetical dismay?

Let’s put it in the core-integration perspective: highlighting text this way just looks as a hack, a dead-end. Hacks can work (and I like the clever ones), but it’s a plugin territory for me.

I could think of just on reason: Performance degradations on mobile browsers and other underpowered hardware. OTOH, this will rectify itself in just a few months if we align our vision along the phone vendors’ claims that any current high-end phone offers desktop performance.

There are also lower power consumption trends, but I wouldn’t speculate on it.

Offline

#58 2015-10-27 11:40:09

etc
Developer
Registered: 2010-11-11
Posts: 3,875
Website

Re: Improved Text Editor Capability

Destry wrote #296242:

And here’s what is shown if I look at the page source in my browser (both Safari and Firefox)…

Don’t look at the page source, but right-click on the textarea in the “edit” mode and then “Inspect element”. HTML preview is not related to the syntax highlighter, unless spf_writer tweaks it, but I can not test…

Offline

#59 2015-10-27 12:00:03

Destry
Member
From: Haut-Rhin
Registered: 2004-08-04
Posts: 4,464
Website

Re: Improved Text Editor Capability

When I do as you describe, this is what I see…

In any case, this shouldn’t be an argument. As I said, it would be nice to have syntax highlighting if it can be done in a reasonable manner. But something tells me the horse committee is divided on that issue, whether about having it at all or how to do it. That’s why plugins exist. ;)

Offline

#60 2015-10-27 12:34:37

philwareham
Core designer
From: Haslemere, Surrey, UK
Registered: 2009-06-11
Posts: 3,366
Website

Re: Improved Text Editor Capability

Any code editor (with syntax highlighting) and text formatting bar would probably have to be separate things – since no current WYSIWYG I’ve looked at fulfils both tasks satisfactorily for me. Since I never code in the admin side I wouldn’t personally be interested in a core code editor – even more so once v4.8 lands with proper theme (skin) support in flat files – but I understand others would (and indeed there are plugin authors providing that solution already).

The audience for a text formatting bar is greater, since the majority of end users will be content creators as opposed to site designers. Hence my interest in seeing a core solution.

Offline

Board footer

Powered by FluxBB