Special Characters on to the User Interface

Here is one simple way something similar could be achieved (you can obviously play around with how the grid is shown / hidden, the list of symbols, use loops to create the grid, etc.):

load(
  local!textValue,
  local!isCollapsed: true,
  {
    a!linkField(
      links: a!dynamicLink(
        label: if(
          local!isCollapsed,
          "Show",
          "Hide"
        ) & " special characters",
        saveInto: a!save(
          local!isCollapsed,
          not(local!isCollapsed)
        )
      )
    ),
    a!columnsLayout(
      showWhen: not(local!isCollapsed),
      columns: {
        a!columnLayout(
          width: "NARROW",
          contents: a!gridField(
            label: "Special Characters",
            value: topaginginfo(
              1,
              - 1
            ),
            totalCount: 2,
            columns: {
              a!gridTextColumn(
                data: {
                  "§",
                  "Æ"
                },
                links: {
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "§"
                    )
                  ),
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "Æ"
                    )
                  )
                }
              ),
              a!gridTextColumn(
                data: {
                  "¶",
                  "¢"
                },
                links: {
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "¶"
                    )
                  ),
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "¢"
                    )
                  )
                }
              )
            }
          )
        )
      }
    ),
    a!paragraphField(
      label: "Text",
      value: local!textValue,
      saveInto: local!textValue
    )
  }
)

Here is one simple way something similar could be achieved (you can obviously play around with how the grid is shown / hidden, the list of symbols, use loops to create the grid, etc.):

load(
  local!textValue,
  local!isCollapsed: true,
  {
    a!linkField(
      links: a!dynamicLink(
        label: if(
          local!isCollapsed,
          "Show",
          "Hide"
        ) & " special characters",
        saveInto: a!save(
          local!isCollapsed,
          not(local!isCollapsed)
        )
      )
    ),
    a!columnsLayout(
      showWhen: not(local!isCollapsed),
      columns: {
        a!columnLayout(
          width: "NARROW",
          contents: a!gridField(
            label: "Special Characters",
            value: topaginginfo(
              1,
              - 1
            ),
            totalCount: 2,
            columns: {
              a!gridTextColumn(
                data: {
                  "§",
                  "Æ"
                },
                links: {
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "§"
                    )
                  ),
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "Æ"
                    )
                  )
                }
              ),
              a!gridTextColumn(
                data: {
                  "¶",
                  "¢"
                },
                links: {
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "¶"
                    )
                  ),
                  a!dynamicLink(
                    saveInto: a!save(
                      local!textValue,
                      local!textValue & "¢"
                    )
                  )
                }
              )
            }
          )
        )
      }
    ),
    a!paragraphField(
      label: "Text",
      value: local!textValue,
      saveInto: local!textValue
    )
  }
)

You're welcome! One thing to note is that this will only add the character onto the end of the text; there is no way to insert the character at the cursor, though the user can always cut-and-paste at that point.