Sitecore Insiders

Code Editor for custom field using SPEAK & CodeMirror – Intro

Introduction

Why would you need a code editor with hint and lint in a Sitecore custom field using SPEAK? In case you have muppeted a React Native app and you have JavaScript actions inside items, just an example…

Sometimes you need to do things outside the box and Sitecore allows it. Many times in his own strange ways, but other times is just up to you, how outside the box / wrong you want to make things.

In this tutorial, I will show how can you integrate a code editor in Sitecore Content Editor using a custom field type, a SPEAK dialog and Code Mirror JavaScript library.

This is one of the things that you can do with a “custom field with a SPEAK dialog”, but there are a lot of possibilities.

Note: there is already a Sitecore Code Editor developed by Michael West that follows a different approach, it uses Sheer instead of SPEAK and it targets Rich Text instead of Multi-Line Text. You can check it here.

What to expect from this tutorial?

I will try to explain everything and every step, minimizing the “this-is-happening-by-magic” feelings by explaining the code used. As a result, I expect you to be able to learn:

  • Create a SPEAK dialog – Part 1
    • Defining layout and renderings
    • Behavior through Rules
    • Creating the PageCode
  • How to create a custom field type inheriting from Multi-line Text – Part 2
    • The custom field type item
    • The code & config
  • Add a menu button to field type to open the dialog – Part 3
    • Adding a menu button
    • Handling menu button click
    • Calling the dialog
  • Integrate CodeMirror JS library into the dialog – Part 4
    • What is CodeMirror and how it works?
    • Import & integrate CodeMirror library
    • Content Editor field cosmetic

Assumptions

  • You are familiar with Sitecore
  • Have Visual Studio
  • And Sitecore Rocks

Result

Custom Field with Code Editor developed using SPEAK and Code Mirror
Image 1 – Custom Field with Code Editor developed using SPEAK and Code Mirror

Module Package

Ready to install module can be found here. This was tested on Sitecore 9.1.1 but I believe this will work even in 8.

https://github.com/sitecoreinsiders/SitecoreRepo/blob/main/SitecoreInsiders.Shell.CodeEditor/Sitecore%20Packages/SitecoreInsiders.Shell.CodeEditor-1.0.0.zip

Source Code

Check here for the source code of this module. This have almost the same code in the tutorial, little tweaks just.

https://github.com/sitecoreinsiders/SitecoreRepo/tree/main/SitecoreInsiders.Shell.CodeEditor

Bruno Nunes

Sitecore developer since 2015, passed by 7.5, 8.2, 9.1, next step will be the 10!
Self-motivated to bring new capabilities to Sitecore and to adapt it for every business case.
Currently working on Noesis as Sitecore Architect / Tech Lead.

Add comment

Bruno Nunes

Sitecore developer since 2015, passed by 7.5, 8.2, 9.1, next step will be the 10!
Self-motivated to bring new capabilities to Sitecore and to adapt it for every business case.
Currently working on Noesis as Sitecore Architect / Tech Lead.