clojurescriptckeditor4.xreagentclojurescript-javascript-interopshadow-cljs

How to get CKEditor react component usable in ClojureScript


I cannot get CKEditor react component to work in ClojureScript project.

When I try to use the component

(ns simple.core
  (:require [reagent.core :as reagent]
            [re-frame.core :as rf]
            [clojure.string :as str]
            [simple.routes :as routes]
            ["ckeditor4-react" :as ck :default CKEditor]
            ))

...

    [:> CKEditor]

I get

    template.cljs:312 Uncaught Error: Assert failed: Expected React component in: [:> nil]
 (in simple.core.ui)
(or (string? comp) (fn? comp))
    at Object.reagent$impl$template$vec_to_elem [as vec_to_elem] (template.cljs:312)
    at Object.reagent$impl$template$as_element [as as_element] (template.cljs:329)
    at template.cljs:403
    at core.cljs:5598
    at core.cljs:5598
    at Object.cljs$core$IKVReduce$_kv_reduce$arity$3 (core.cljs:5602)
    at Object.cljs$core$_kv_reduce [as _kv_reduce] (core.cljs:700)
    at Object.cljs$core$reduce_kv [as reduce_kv] (core.cljs:2543)
    at reagent$impl$template$make_element (template.cljs:401)
    at Object.reagent$impl$template$native_element [as native_element] (template.cljs:285)

I have created a simple github project to illustrate.

https://github.com/madhat2r/shadow-re-frame-simple-example

If you clone it and follow instructions in the readme you can reproduce.

Thanks for your help!


Solution

  • Turns out it was an issue with the :require using :default you have to use

    ["ckeditor4-react" :as CKEditor]
    
    ...
    
    [:> CKEditor {:onBeforeLoad (fn [ck] (set! (.-disableAutoInline ck) true))}]
    
    

    Shadow-cljs: https://shadow-cljs.github.io/docs/UsersGuide.html#_about_default_exports

    Note: the onBeforeLoad function above fixes a bug with current version. Left it for anyone who might come across it. https://github.com/ckeditor/ckeditor4-react/issues/57