Highlighting not working for SAS language option

[andersbenn]

Hi Anas! Thanks for a great project, it's been super useful!

I am displaying SAS code, and noticed that the highlighting is not working. The code is white, as if "text" was chosen as the programming language. I am also displaying sql and yaml code in different editors on the same page, which are both working nicely.

Code for SAS editor:

sas_dict = code_editor(
                    ss["job"].sas_code,
                    shortcuts=ss["shortcuts"],
                    theme=ss["theme"],
                    lang="sas",
                    height=ss["height"],
                    buttons=code_editor_buttons,
                    options={"wrap": ss["wrap"], "showLineNumbers": True},
                    info=info_bar_sas,
                )

where

# Code editor settings
with st.expander(
        "Code editor settings" if english() else "Instillinger for kode-editor",
        expanded=False,
    ):
        col_a, col_c, col_cb = st.columns([17, 3, 3])
        col_c.markdown(
            '<div style="height: 2.5rem;"><br/></div>', unsafe_allow_html=True
        )
        col_cb.markdown(
            '<div style="height: 2.5rem;"><br/></div>', unsafe_allow_html=True
        )

        ss["height"] = col_a.slider("min-max lines:", 1, 100, (40, 45))

        col_d, col_e, col_f = st.columns([1, 1, 1])
        ss["theme"] = col_d.selectbox(
            "Theme:", ["default", "light", "dark", "contrast"], index=2
        )
        ss["shortcuts"] = col_e.selectbox(
            "Shortcuts:", ["emacs", "vim", "vscode", "sublime"], index=2
        )
        ss["focus"] = col_c.checkbox("Focus", False)
        ss["wrap"] = col_cb.checkbox("wrap", False)
        )

code_editor_buttons = [
    {
      "name": "Copy",
      "feather": "Copy",
      "hasText": true,
      "alwaysOn": true,
      "commands": [
        "copyAll",
        [
          "infoMessage",
          {
            "text": "Copied to clipboard!",
            "timeout": 2500,
            "classToggle": "show"
          }
        ]
      ],
      "style": {
        "top": "-0.25rem",
        "right": "5.4rem"
      }
    },
    {
      "name": "Save",
      "feather": "Save",
      "hasText": true,
      "bindKey": { "win": "Ctrl-S", "mac": "Command-S" },

      "alwaysOn": true,
      "commands": [
        "save-state",
        [
          "response",
          "saved"
        ]
      ],
      "response": "saved",
      "style": {
        "top": "-0.25rem",
        "right": "0.4rem"
      }
    }
  ]

info_bar_sas = {
        "name": "language info",
        "css": css_string,
        "style": {
            "order": "1",
            "display": "flex",
            "flexDirection": "row",
            "alignItems": "center",
            "width": "100%",
            "height": "2.5rem",
            "padding": "0rem 0.75rem",
            "borderRadius": "8px 8px 0px 0px",
            "zIndex": "9993",
        },
        "info": [{"name": "SAS", "style": {"width": "100px"}}],
    }

When running this code, the code editor renders with white, unhighlighted text, and I get this error in the terminal:

2024-06-11 05:45:36.228 ComponentRequestHandler: GET /workspace/dataplattformen/.venv/lib/python3.11/site-packages/code_editor/frontend/build/mode-sas.js read error
Traceback (most recent call last):
  File "/workspace/dataplattformen/.venv/lib/python3.11/site-packages/streamlit/web/server/component_request_handler.py", line 54, in get
    with open(abspath, "rb") as file:
         ^^^^^^^^^^^^^^^^^^^
FileNotFoundError: [Errno 2] No such file or directory: '/workspace/dataplattformen/.venv/lib/python3.11/site-packages/code_editor/frontend/build/mode-sas.js'

I noticed that sas is missing from the mode_list in __init__.py (line 102 in version 0.1.20). However, adding it did not resolve the issue.

Any ideas about what might be the cause? Thanks!

[bouzidanas]

Hi @andersbenn

The end of the error you got:

FileNotFoundError: [Errno 2] No such file or directory: '/workspace/dataplattformen/.venv/lib/python3.11/site-packages/code_editor/frontend/build/mode-sas.js'

tells me that the mode file doesnt exist and indeed after checking, the only mode with those letters that I see is sass but there is no sas.

You can create one and add it either to your install or fork bouzidanas/ace-builds and add it to /src-noconflict. Make sure the file you add is called mode-sas.js and make sure to update ace-modules.d.ts and webpack-resolver.js. After you have made these changes and added the mode file, you can submit a pull request and I will accept it and release a new version of code editor so that you and others can use it without customization going forward!

Also, you might find resources for creating your own mode here: https://stackoverflow.com/questions/29804118/how-to-build-a-mode-in-ace