Applying code tags to just a single word or phrase in a sentence

[nickjj]

When selecting just a word or phrase and pressing the < > button, the entire sentence gets displayed as a code block.

Steps to Reproduce

1. View the demo of Trix at https://trix-editor.org/
2. Select the word "open-source" or any word / multi-phrase word
3. Click the < > button.

Details

• Trix version: https://trix-editor.org/

Expected Results

I would have expected an inline <code>open-source</code> block to be used just like the GitHub markdown editor allows you to do. In Trix terms, I would have expected the behavior to match the bold button.

Proposed Fix (in theory)

If text is selected, apply code tag to selected text, else apply code tag to full sentence.

[javan]

I agree that inline code formatting would be nice. I've wanted it too!

I would have expected an inline <code>open-source</code> block to be used just like the GitHub markdown editor allows you to do. In Trix terms, I would have expected the behavior to match the bold button.

Just to clarify, Trix has two kinds of formatting attributes: text (inline) and block. The first group of toolbar buttons apply text formatting, and the second group applies block formatting. For the most part, the buttons in each group behave the same.

Block formatting expands the selection around the nearest \ns or the containing block element

Text formatting applies to the selected range of text

Following those guidelines, inline code formatting would need to be implemented as a text attribute, and would need its own toolbar button in the first group. That's kind of clunky though since there'd be two code formatting buttons. Ideally, one button would just do the right thing, like you said.

I took a shot at implementing that as a plugin of sorts using Trix's events and editor API:

Trix.config.textAttributes.inlineCode = { 
  tagName: "code", 
  inheritable: true 
}

addEventListener("trix-initialize", event => {
  const element = event.target
  const { toolbarElement, editor } = element

  const blockCodeButton = toolbarElement.querySelector("[data-trix-attribute=code]")
  const inlineCodeButton = blockCodeButton.cloneNode(true)

  inlineCodeButton.hidden = true
  inlineCodeButton.dataset.trixAttribute = "inlineCode"
  blockCodeButton.insertAdjacentElement("afterend", inlineCodeButton)
  
  element.addEventListener("trix-selection-change", _ => {
    const type = getCodeFormattingType()
    blockCodeButton.hidden = type == "inline"
    inlineCodeButton.hidden = type == "block"
  })

  function getCodeFormattingType() {
    if (editor.attributeIsActive("code")) return "block"
    if (editor.attributeIsActive("inlineCode")) return "inline"

    const range = editor.getSelectedRange()
    if (range[0] == range[1]) return "block"

    const text = editor.getSelectedDocument().toString().trim()
    return /\n/.test(text) ? "block" : "inline"
  }
})

[nickjj]

Hey, thanks a lot for supplying that plugin snippet for now. That works quite nicely for the time being.

Are you going to leave this open until you decide how to deal with having a single button for both a block and inline effect?

[javan]

I'm going to close this since it's technically not a bug. Trix doesn't provide inline code formatting out of the box, and block code formatting is working as designed.

Thanks for bringing this up though! I'd like to add contextual single-button formatting in a future update.

[petros]

Sorry for hijacking an existing issue. Is inline code formatting something the team would accept a pull request for? Also (a first timer here), how would this work in regards to Basecamp? If such a pull request was ever accepted, would the new feature be also added to Basecamp itself? Thanks!

[nir0s]

It generally seems to me that (regardless of trix's feature-set) given that Basecamp powers a lot of software companies, backtick style formatting would be a given. This is widely used for code, but also for variables, names, etc..

I'd love to see it in Basecamp :)

[siscia]

@javan are you going to accept PR on this?

[ozataman]

Just want to throw in some more support for this idea. Our team is doing substantially fewer conversations on Basecamp message board due to this missing backtick feature, instead preferring environments like Slack, even though Basecamp would be the better place for persistent discussions.

[jclusso]

So any reason this minor change that seems to be fully working doesn't get merged in after 3 years? Seems kinda silly considering a ton of people have shown interest. Also how do technical people at Basecamp not find it irritating that they can't do this? Like every other place supports this.

[lylo]

FWIW as a Basecamp user I would find this super-helpful! 🙏

[dfallman]

Agree.

[jhollowed]

Agree, please 🙏

[her-ur]

Very useful for me also 🙏

[JoshInLisbon]

It generally seems to me that (regardless of trix's feature-set) given that Basecamp powers a lot of software companies, backtick style formatting would be a given. This is widely used for code, but also for variables, names, etc..

Has anyone made a PR for this / fork / gem?

[jon-sully]

Just adding support for this being a native feature of Trix 👍

[pjmartorell]

Very disappointed to see that such a basic thing like inline code formatting is still not supported, even Markdown supports it 👀
If there is a well-grounded (strong) opinion not to support this feature it would be nice if you could share it here.

[petros]

I don't think there's anything fundamental in the philosophy of this project that would prevent the addition of this feature. I think it's a combination of the following things:

• There's a workaround suggested here: Applying code tags to just a single word or phrase in a sentence #552 (comment)
• Nobody has proposed the changes in a PR as far as a know
• Nobody in the core team has time or pressure to implement it themselves
• I am also assuming only CoffeeScript would be acceptable? Maybe that plays into not seeing a PR? I dunno

[jhollowed]

I don't think there's anything fundamental in the philosophy of this project that would prevent the addition of this feature. I think it's a combination of the following things:

• There's a workaround suggested here: Applying code tags to just a single word or phrase in a sentence #552 (comment)

Sure, but I use Basecamp desktop for Mac, where I'd like this feature. I do not know how to include this plugin snippet in the app, or if that's even possible. Is it?

[jon-sully]

I believe the workaround is for folks whose apps use Trix — I imagine the middle two points:

• Nobody has proposed the changes in a PR as far as a know
• Nobody in the core team has time or pressure to implement it themselves

Bare the biggest weight with regard to this being a feature of Basecamp's implementation of Trix. At the end of the day adding this feature to Trix and having the functionality in Basecamp are separate things.

[petros]

You are both right @jhollowed & @jon-sully. I was referring to folks that use Trix in their apps. However, if this makes it into Trix here, it will eventually make it into Basecamp (I hope) 😄.

[levidavidmurray]

Until Basecamp decides to support inline code styling, a workaround is to use the plugin implementation that @javan suggested here via a userscript manager (like Violentmonkey, Tampermonkey, or Greasemonkey).

Here's a gist of the userscript I'm using. It's essentially what @javan posted above with some modifications to add the code CSS styling and fix an edge case where multiple inlineCode buttons were being added.
https://gist.github.com/levidavidmurray/1991453b348852c00c2bb2f78b373c50

The obvious downside is that everyone needs to have this userscript enabled to see the effect. I'm really hoping Basecamp implements inline code styling at some point in the near future.