How to import and use external react modules from shadow-cljs

[MicahD]

Hello everyone. I am new to CLJS and am having a hard time figuring out a certain type of import.

This is the example JSX from the vendor.

import React from 'react';
import ReactDOM from 'react-dom';
import { Editor, EditorTools } from '@progress/kendo-react-editor';
import content from './content';

const {
    Bold, Italic, Underline, Strikethrough, Subscript, Superscript,
    AlignLeft, AlignCenter, AlignRight, AlignJustify,
    Indent, Outdent, OrderedList, UnorderedList,
    Undo, Redo, FontSize, FontName, FormatBlock,
    Link, Unlink, InsertImage, ViewHtml,
    InsertTable,
    AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter,
    DeleteRow, DeleteColumn, DeleteTable,
    MergeCells, SplitCell
} = EditorTools;

class App extends React.Component {
    render() {
        return (
            <Editor
                tools={[
                    [Bold, Italic, Underline, Strikethrough],
                    [Subscript, Superscript],
                    [AlignLeft, AlignCenter, AlignRight, AlignJustify],
                    [Indent, Outdent],
                    [OrderedList, UnorderedList],
                    FontSize, FontName, FormatBlock,
                    [Undo, Redo],
                    [Link, Unlink, InsertImage, ViewHtml],
                    [InsertTable],
                    [AddRowBefore, AddRowAfter, AddColumnBefore, AddColumnAfter],
                    [DeleteRow, DeleteColumn, DeleteTable],
                    [MergeCells, SplitCell]
                ]}
                contentStyle={{ height: 600 }}
                defaultContent={content}
            />
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

So my CLJS import looks like this:

(ns test.edit
  (:require [reagent.core :as r]      
            ["@progress/kendo-react-editor" :refer (Editor EditorTools)]
            [re-frame.core :as rf]))

(defn test-editor []
  [:> Editor {:defaultConent "This is content"
              :tools [[EditorTools/Bold]]
              :contentStyle { :height 600 }}])

This works and Editor and EditorTools are both imported. but for the life of me I cannot figure out how to assign the Bold function to the properties map of Editor.

Does anybody know how to do this properly?

[MicahD]

Never mind, I figured it out.

You have to asign them like this:

(defn test-editor []
  [:> Editor {:defaultConent "This is content"
              :tools [[(.. EditorTools -Bold)]]
              :contentStyle { :height 600 }}])

This makes things a bit bulky, but it does work