spf_codemirror - syntax-highlighting and code-completion admin plugin

lucidlee · 2012-10-09 09:19:29

This is a really useful enhancement, thanks.

Unfortunately I’m getting some crinkly activity when I select rubyblue or elegant as the theme.
When I try editing a style the edited line is actually some random number of lines above the insertion cursor.
Sometimes if I swap themes midstream I can get it to behave properly but its not a repeatable fix. Am I the only one experiencing this?

Its only minor I guess since the other themes work just fine, but I find the rubyblue theme is the most readable.

Lee
Safari 6.0, MacOSX 10.7.4, MAMP (MySQL 5.2, PHP5.4)

uli · 2012-10-09 10:02:32

Am I the only one experiencing this?

Nope. Add these lines to the end of your cm_combined_min.css:

.CodeMirror-lines pre {
	line-height: 1.411em;
	}

.CodeMirror-gutter-text pre {
	line-height: 1.461em;
	}

Probably won’t suit your environment/theme offhand.

Edit: Added pre to second selector

Last edited by uli (2012-10-09 13:52:18)

lucidlee · 2012-10-11 14:21:59

Hey that seems to work! Thanks

UPDATE: I spoke too soon. It works but there are sporadic failures. I don’t see a pattern yet though.

UPDATE 2: Now I think I see the pattern. Editing goes screwy below commented text paras. Eg try editing this snippet:
@<script type=“text/javascript” src=”<txp:site_url />site-design/js/prettyPhoto.js”></script>

<!—[if IE 8]>
<link rel=“stylesheet” type=“text/css” media=“all” href=”<txp:site_url />site-design/css/ie8.css” />
<![endif]—>

<txp:output_form form=“del_custom_colours” />

<txp:if_section name=“default”>
<script type=“text/javascript” src=”<txp:site_url />site-design/js/loopedSlider.js”></script>
</txp:if_section>@

Last edited by lucidlee (2012-10-14 23:54:06)

mrdale · 2012-10-26 18:29:09

I’d love to be able to toggle fullscreen with a keystroke. Any chance of building that into the plugin?

mrdale · 2012-10-27 17:37:06

Full-screen toggle

I just hacked full-screen via keystroke F5 into the plugin… here’s how to do it…

Step 1

Find the function function spf_textarea_common() { on around line 175 and add these Lines right after it and before the line containing EOF;

<script type="text/javascript">
function isFullScreen(cm) {
      return /\bCodeMirror-fullscreen\b/.test(cm.getWrapperElement().className);
    }
    function winHeight() {
      return window.innerHeight || (document.documentElement || document.body).clientHeight;
    }
    function setFullScreen(cm, full) {
      var wrap = cm.getWrapperElement(), scroll = cm.getScrollerElement();
      if (full) {
        wrap.className += " CodeMirror-fullscreen";
        scroll.style.height = winHeight() + "px";
        document.documentElement.style.overflow = "hidden";
      } else {
        wrap.className = wrap.className.replace(" CodeMirror-fullscreen", "");
        scroll.style.height = "";
        document.documentElement.style.overflow = "";
      }
      cm.refresh();
    }
</script>
<style type="text/css">
  .CodeMirror-fullscreen {
	display: block !important;
	position: absolute !important;
	top: 0px !important; left: 0 !important;
	width: 100% !important;
	z-index: 99999999999 !important;
  }
</style>

Step 2:

Add these lines at the end of each page’s codemirror call before the line }); You will have to add a comma at the end of the previous line as well.

	extraKeys: {
	"F5": function(cm) {setFullScreen(cm, !isFullScreen(cm));},
	"Esc": function(cm) {if (isFullScreen(cm)) setFullScreen(cm, false);}
	}

Tested on a Mac with Firefox running TXP 4.6 with a modified Hive theme

mrdale · 2012-10-28 17:44:25

Standard CodeMirror Directory?

I wonder whether it may not be better to have this plugin work with a standard codeMirror directory so that TXP users can stay current with latest builds more easily.

This plugin uses 2.25 whereas the current version has moved to 2.3x which purportedly fixes bugs and adds features. Not sure the level of customization that has been done to cM…

Thoughts?

Last edited by mrdale (2012-10-28 17:46:07)

spiffin · 2012-11-03 16:57:41

@ Dale

Thanks for the full-screen addition.

FYI I’m currently updating my plugins for Txp 4.5.x – the next version of spf_codemirror will incorporate the latest version of Codemirror plus Emmet (the new replacement for Zen Coding). I’ll also look at a standard Codemirror directory.

Simon

mrdale · 2012-11-03 17:23:57

Gracias!

Actually… you know what would be really useful? An admin area similar to hak_tinymce where you can add your own initialization strings to the call for each instance (css, page,form, etc…).

spiffin · 2012-11-08 17:24:07

Version 0.61 is out with a stack of new features incl. full-screen (thanks Dale), preferences (via Admin > Prefs > Advanced), easy CodeMirror upgrades and Minify support.

Apologies for the slightly long-winded code – I’ll tighten it up later.

Download & info.

Simon

Last edited by spiffin (2012-11-08 23:07:11)

spiffin · 2013-01-22 22:16:53

Version 0.8 is out now – new versions of CodeMirror (3.01) & Emmet (1.3.3) + match-highlighting and full-screen search.

Download & info.

Simon

mrdale · 2014-01-28 17:02:24

Idea: I’d like to use this editor full screen most of the time, and I’d love a keybinding to “save” so I could stay in full screen. Any thoughts?

sacripant · 2014-01-28 18:22:34

Add cmd/ctrl – s for save, see Jukka blog

mrdale · 2014-01-28 22:11:48

sacripant wrote #278539:

Add cmd/ctrl – s for save, see Jukka blog

Good call… for some reason, when I save it reloads the page and goes back to non-full-screen… wonder what I’m doing wrong…

candyman · 2014-10-13 08:09:06

There’s an annoying problem: when I am in the

Presentation => Pages (for example)

the bottom part of the menus Presentation, Administraton and Extentions (I have many) are hided by the code window.

I use Remora admin style.

Last edited by candyman (2014-10-13 08:09:56)

spiffin · 2014-10-13 15:54:39

Hello candyman

Please download the new version – which includes CodeMirror 4.6 – and make sure you completely delete your old codemirror directory.

Simon

Textpattern CMS

Textpattern CMS support forum

#16 2012-10-09 09:19:29

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#17 2012-10-09 10:02:32

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#18 2012-10-11 14:21:59

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#19 2012-10-26 18:29:09

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#20 2012-10-27 17:37:06

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

Full-screen toggle

Step 1

Step 2:

#21 2012-10-28 17:44:25

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

Standard CodeMirror Directory?

#22 2012-11-03 16:57:41

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#23 2012-11-03 17:23:57

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#24 2012-11-08 17:24:07

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#25 2013-01-22 22:16:53

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#26 2014-01-28 17:02:24

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#27 2014-01-28 18:22:34

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#28 2014-01-28 22:11:48

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

sacripant wrote #278539:

#29 2014-10-13 08:09:06

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

#30 2014-10-13 15:54:39

Re: spf_codemirror - syntax-highlighting and code-completion admin plugin

Board footer