MD Composer extras

[Steven]

This theme component adds few formatting options in the composer : underline, align center, align right, justify and strikethrough. You can customize the text of each button in the settings, making it compatible with every languages. Exist in rtl version (change align right to align left).

Compatibility

This theme component is an alternative of the Discourse Formatting Toolbar, I don’t recommend using both.

I recommend the plugin, but if you don’t want to (or can’t) install a plugin, this theme component might add enough options in the composer for you.

Also, to adapt the the component in mobile devices, I hid some buttons : bullet list, list and justify. They seemed the less helpful in this device.

For RTL languages forums, here is the rtl version : GitHub - MonDiscourse/md-composer-extras-rtl: Add some formatting option in your discourse composer (rtl version) · GitHub

Let me know if there is some issue !

	Preview	md-composer-extras - Preview
	Repository	md-composer-extras
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

[Anatolia]

It becomes like this if I use alignin together with underline.

[Steven]

That’s a limitation of the div align code, you need to add a line between the div align and your text

<div align="center">

[u]underline[/u]
</div>

That’s why I used a bbcode in my formatting toolbar, but I could only use the div in this theme component.

I’ll probably add an extra line by default and a little explanation

[Steven]

I upgraded the component to add those extra lines by default, now, when you use a align button and the underline button, you’ll have something like this

[tophee (Christoph)]

@Steven

I recommend the plugin

What are the disadvantages of using the theme-component?

[Steven]

The plugin is easier to customize, we can choose which buttons will appear or not, and there are some additional options like color or a float button that can do something like this with the image

[jtbayly]

Quite amazing what can be done with theme components! Well done.

[verilog15 (verilog)]

Nicely done
Do you think it’s possible to somehow to convert the HTML tags to some default tag like [Center] and something in the backend will convert it back (for UI reasons)?

[Steven]

At the time, it wasn’t possible to create some bbcodes easily with theme components, I don’t know if it is now.

For now, if you want bbcode center and a button in the composer, the best way is to use the plugin : Formatting toolbar

[Johani (Joe)]

A tag like [center] will still require a plugin but you’re correct @Steven

At the time of this component’s creation you had to use HTML <div> tags. However, you can now use [wrap="foo"][/wrap] in themes / components.

You can read more about that here

Generic bbcode wrapper for theme components

I added this feature a while back and realised I didn’t post about it. You can now use a special syntax in markdown to have it cooked and usable in theme components without having to write a plugin. // wrapped in div.d-wrap [wrap=baz foo=bar]Content[/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] Content [/wrap] // wrapped in div.d-wrap [wrap=baz foo=bar] [/wrap] // this one will be rendered as a span.d-wrap instead of a div.d-wrap a [wrap=baz]Content[/wrap] b The name of the component w…

Here’s a simple example

[wrap="center"] 
Some center aligned text 
[/wrap]

would create this markup when the post is cooked

<div class="d-wrap" data-wrap="center">
  <p>Some center aligned text</p>
</div>

which you can then target with a CSS attribute selector like so

[data-wrap="center"] {
  text-align: center;
}

and that would create something like this in both the composer preview and the rendered post

or

[wrap="right"] 
Some right aligned text 
[/wrap]

and that would result in this cooked markup

<div class="d-wrap" data-wrap="right">
  <p>Some center aligned text</p>
</div>

You can then add this CSS

[data-wrap="right"] {
  text-align: right;
}

for this result

Since the component currently uses the HTML align attribute, this change should be 100% backwards compatible.

Give it a go whenever you have the time and feel free to PM me if you have any questions about that.

[thwright]

방금 래프(wrap) 컴포넌트에 대한 풀 리퀘스트를 제출했습니다.

https://github.com/iunctis/md-composer-extras/pull/1
https://github.com/iunctis/md-composer-extras/pull/2
https://github.com/iunctis/md-composer-extras/pull/3

[thwright]

float left에 대한 추가 pull request를 추가했습니다. 여기에는 float right를 위한 CSS 옵션, 취소선 버튼을 굵게, 기울임, 밑줄 버튼과 함께 배치하는 것, 그리고 기본 columns 버튼 생성이 포함됩니다. 마지막 항목은 자체 컴포넌트로 만드는 것이 더 나을 수도 있고, 팝업 메뉴로 이동시키는 것도 고려해 볼 수 있습니다.

pull request를 제거했습니다. 추가 수정이 필요합니다. 또한 상첨자(스프)와 하첨자(서브스크립트) 버튼도 추가하려고 합니다. 하지만 캘린더 이벤트, slick, tiles를 추가하면 모바일 세로형 composer에서 버튼이 너무 많아집니다. 가로형에서는 문제가 되지 않을 수 있지만, 모든 버튼이 어느 메뉴에서든 접근 가능해야 한다면 팝업으로 이동시켜야 합니다.

@Steven, 이 문제를 어떻게 처리하고 싶으신가요? 의견이 있으신가요?

메인 js를 두 개의 파일로 나누고 반응형 CSS 작업을 진행하겠습니다.

이상적으로는 원하는 대로 버튼을 비활성화/숨길 수 있는 설정도 추가해야 합니다.

---

수정: 언급된 변경 사항을 구현했습니다(요소는 CSS를 제외하고는 숨길 수 있는 옵션이 없습니다). 이제 PR을 제출하기 전에 변경 사항을 테스트만 하면 됩니다.

[thwright]

이제 그 PR은 문제없을 거예요, @Steven.

https://github.com/iunctis/md-composer-extras/pull/8

이 PR은 반응형, 플로트, 컬럼, 위첨자, 아래첨자를 구현합니다. 컬럼이 어떻게 작동하는지 확인하려면 README를 참고하세요.

[ondrej]

안녕하세요,
왜 이런 문제가 발생하는지 전혀 모르겠습니다. 며칠 전에 파일을 업로드했는데, 현재 최신 버전을 사용하고 있다고 합니다. 적어도 프로그램은 그렇게 알려주더군요.
감사합니다

[Steven]

최근에 업그레이드를 배포했지만, 정상적으로 작동해야 합니다. 데스크톱과 모바일 웹사이트에서 직접 테스트해 보았거든요.

컴포넌트를 삭제한 후 다시 설치해 보실 수 있을까요? 포럼에서 깨진 것처럼 보입니다.

아니면 포맷팅 툴바 플러그인도 함께 사용 중이신가요? 그렇다면 아이콘이 두 개로 표시될 수 있습니다.

[ondrej]

네, 감사합니다. 말씀하신 대로 확인하고 진행할게요. 생일도 축하해요

[zuker (Matías)]

일부 아이콘을 숨길 수 있나요?

[Steven]

어떤 항목들을 숨기고 싶으신가요? 도와드리겠습니다.

[zuker (Matías)]

취소선, 밑줄, 위첨자 고마워요!

[Steven]

가장 쉬운 방법은 테마의 일반 > CSS 섹션에 다음 CSS 줄을 추가하는 것입니다.

.d-editor-button-bar .strikethrough_button, .d-editor-button-bar .superscript_button, .d-editor-button-bar .subscript_button {
    display: none;
}