mezastel Oct 15 2009 at 22:49

Микроредакторы

14 min

На свете существует много разных полезных редакторов, которые помогают авторам статей готовить контент к публикации на веб-ресурсах. Но к сожалению, очень часто бывает что лучшее – враг хорошего, и приходится пользоваться не очень удобными программами которые вместо того чтобы взять и заточить «свой» редактор под нужные цели. Мой подход к этому вопросу как раз заключается в написании своего редактора. В этом посте, я хочу рассказать про то, как и какие фичи я реализовал.

Автогенерация контента

Если взять тот же Microsoft Word, то там есть например возможность добавить содержание (table of contents) или ссылке (references/endnotes/footnotes) в текст. Для публикации на веб-ресурсах эти фичи порой нужны, хотя не все порталы поддерживают, например, именованые ссылки. Но тем не менее, две фичи, которые мне удалось добавить в свой редактор – это автогенерация TOC и списка ссылок («заметок»).

Содержание

Список элементов содержания показан чуть выше в этом посте. Его суть – позволить быструю навигацию по элементам поста или статьи. Естественно, этот список автогенерируется используя тэги H1—H8, которые он находит в документе. Просто выдирает их, находит самый верхний уровень заголовка (например для Хабра это H3), и делает соответствующие списки с помощью вложенных элементов UL и LI. Это не очень безопасно, но для поиска заголовков используется вот такое простенькое выражение:

var r = new Regex("<h([^<]+)>(.+)</h.>"); 

Содержание полезно в основном для больших постов, например если вы пишете статью на CodeProject. Кстати замечу, что если заголовков нет, то и содержание не создается. А уровень заголовка содержания (если оно есть) всегда соответствует верхнему уровню заголовка в файле.

Реализация такого списка была непростой задачей. Вот кусочек кода, который иллюстрирует как это сделано:

private static string GenerateToc([NotNull]string text, ConversionOptions options, out int minLevel) { List<HeadingEntry> entries = new List<HeadingEntry>(); var r = new Regex("<h([^<]+)>(.+)</h.>"); var matches = r.Matches(text); int count = 0; foreach (Match m in matches) { int n; if (int.TryParse(m.Groups[1].Value, out n)) { HeadingEntry he = new HeadingEntry(n, m.Groups[2].Value); // set tag text if clash bool bFound = false; foreach (HeadingEntry h in entries) if (h.SuggestedTagText == he.SuggestedTagText) bFound = true; he.TagText = he.SuggestedTagText + (bFound ? (count++).ToString() : string.Empty); entries.Add(he); // replace only first occurence //text = text.Replace(m.Groups[0].Value, // string.Format("<h{0}><a name=\"{2}\"></a>{1}</h{0}>", n, he.Text, he.TagText)); int idx = text.IndexOf(m.Groups[0].Value); string emptyLink = options.UseImageHeadings ? string.Empty : string.Format("<a name=\"{0}\"></a>", he.TagText); text = text.Remove(idx, m.Groups[0].Value.Length).Insert(idx, string.Format("<h{0}>{2}{1}</h{0}>", n, he.Text, emptyLink)); } } minLevel = int.MaxValue; if (entries.Count > 0) { var hb = new HtmlBuilder(); // all are, essentially, ULs int lastLevel = -1; foreach (HeadingEntry he in entries) { // if this level > last, open a new UL if (he.Level > lastLevel) hb.AppendLine("<ul>").Indent(); if (he.Level < lastLevel) { int diff = lastLevel - he.Level; while (--diff >= 0) hb.Unindent().AppendLine("</ul>"); } hb.AppendLine(string.Format("<li><a href=\"#{0}\">{1}</a></li>", he.TagText, he.Text)); minLevel = Math.Min(minLevel, he.Level); lastLevel = he.Level; } // close out all indent levels while (hb.IndentLevel > 0) hb.Unindent().AppendLine("</ul>"); if (!string.IsNullOrEmpty(options.TocLabel)) hb.Insert(string.Format("<h{0}>{1}</h{0}>{2}", minLevel, HttpUtility.HtmlEncode(options.TocLabel), Environment.NewLine), 0); // at this point, hb contains the TOC, so if (!string.IsNullOrEmpty(options.TocAfterToken)) { int idx = text.IndexOf(options.TocAfterToken); if (idx >= 0) return text.Substring(0, idx + options.TocAfterToken.Length) + hb + text.Substring(idx + options.TocAfterToken.Length); } hb.Append(text); return hb.ToString(); } return text; }

Заметки

Заметки, или ссылки, это дополнительные, незначительные мысли, которые фигурируют после самой статьи. Я предпочитаю добавлять их в код в квадратных скобках, [вот так]. Каждой сноске присваивается цифра[1] в порядке встречи в файле, а потом они аккуратно группируются в конце документа.

К сожалению, заметки не вытащить regexp’ами – ведь у вас могу быть просто квадратные скобки, например в секции PRE. Поэтому «отлов» квадратных скобок реален только в процессе обхода файла (по букве) трансформатором. Да-да, это тот же трансформатор, что делает красивые прочерки и кавычки.

Текст как картинки

Иногда нужно продемонстрировать какой-то шрифт, иногда хочется что-то написать что не будет поисковиком индексировано, иногда просто хочется защитить свой контент от плагиата. Поэтому, иметь возможность вывести текст как графику – это полезно. А иметь возможность вывести его используя ClearType и OpenType – вообще супер. Поэтому для этих целей мне пришлось к своему управляемому (WPF) приложению дописать «неуправляемую» часть, которая рисует красивый текст используя Direct2D – новый API для двумерной графики от Microsoft. Как это работает? Ну вот пишу я например [{Hello, World!}] а система в ответ на это выдает:

После того как у меня заработал обычный текст, я добавил собственно поддержку шрифтов, размеров и фич OpenType чтобы все рисовалось еще красивее.

Получив возможность безнаказанно подменять текст графикой, я автоматизировал этот процесс так, что например могу заменить все заголовки графикой собственного производства.

Один ценный сниппет, который я наконец-то написал – это метод измерения полезных размеров битмапа после того как на нем нарисован текст. Раньше я делал это в GDI+, но недавно разозлился и написал на С++:

MYAPI RECT MeasureCropArea(BYTE* src, int width, int height, int stride, int color) { Pixel& bgr = *reinterpret_cast<Pixel*>(&color); RECT result; // find the first non-conforming row of pixels for (int y = 0; y < height; ++y) { int y_offset = y * stride; for (int x = 0; x < width; ++x) { int offset = x * sizeof(Pixel) + y_offset; Pixel& s = *reinterpret_cast<Pixel*>(src + offset); // if this pixel is non-conforming, so is the row if (s != bgr) { result.top = y; // cause soft eject x = width; y = height; } } } // find the last non-conforming row of pixels for (int y = height - 1; y >= 0; --y) { int y_offset = y * stride; for (int x = 0; x < width; ++x) { int offset = x * sizeof(Pixel) + y_offset; Pixel& s = *reinterpret_cast<Pixel*>(src + offset); // if this pixel is non-conforming, so is the row if (s != bgr) { result.bottom = y; // cause soft eject x = width; y = -1; } } } // find the first non-conforming column of pixels for (int x = 0; x < width; ++x) { for (int y = 0; y < height; ++y) { int offset = x * sizeof(Pixel) + y * stride; Pixel& s = *reinterpret_cast<Pixel*>(src + offset); // if this pixel is non-conforming, so is the column if (s != bgr) { result.left = x; // cause soft eject x = width; y = height; } } } // find the last non-conforming column of pixels for (int x = width - 1; x >= 0; --x) { for (int y = 0; y < height; ++y) { int offset = x * sizeof(Pixel) + y * stride; Pixel& s = *reinterpret_cast<Pixel*>(src + offset); // if this pixel is non-conforming, so is the column if (s != bgr) { result.right = x; // cause soft eject x = -1; y = height; } } } int w = result.right - result.left; int h = result.bottom - result.top; if (w < 1) { result.left = 0; result.right = 1; } if (h < 1) { result.top = 0; result.bottom = 1; } return result; }

Подсветка синтаксиса

RANT: мне надоело видеть на Хабре статьи где после куска кода написано: This code was highlighted with CodeSyntaxHighlighter. Это неадекват.

Мне для редактора потребовалась точно такая же функциональность. В результате, я воспользовался той же библиотекой что и заспамивший всех хайлайтер (не помню точно как его там), подпил чуть-чуть АПИ и вот, у меня получилось – можно писать {{ мой код }} и подсветка будет работать. Примеры кода есть прямо в этом посте :)

Графы

Графы – это мое новое увлечение. Иногда просто по другому не объяснить мысль. Опять же, автогенерация графика графа это в принципе просто, а на практике привело к созданию DSL которая позволяет мне писать простые команды, а на выходе рисует граф. Из такой вот спеки

edge basic advanced edge advanced TOC`generation edge advanced Text-as-image`generation edge advanced Graph`generation edge Heading`substitution edge TOC`generation Heading`substitution edge Heading`substitution Migration`from`FlowDocument`to`Direct2D edge Text-as-image`generation Heading`substitution edge Graph`generation Subpixel`hinting`(future)

Получается такая вот картинка:

Это конечно DSLка, причем реализовал я ее через reflection. Каждая директива edge превращается в реальный вызов метода edge. Вот как выглядит парсер этих команд:

public void AddInstruction(string line) { if (string.IsNullOrEmpty(line)) return; foreach (Match m in Regex.Matches(line, "([\"'])(?:\\\\\\1|.)*?\\1")) line = line.Replace(m.Value, m.Value.Replace(' ', '`')); string[] parts = line.Split(' ').Select(p => p.Replace('`', ' ').Unquote()).ToArray(); if (parts.Length < 1) return; // having acquired the parts, see if there's a matching method MethodInfo mi = null; if (cachedMethodInfo.ContainsKey(new KeyValuePair<string,int>(parts[0], parts.Length - 1))) mi = cachedMethodInfo[new KeyValuePair<string, int>(parts[0], parts.Length - 1)]; else { var methods = GetType().GetMethods().Where(m => m.Name.ToLower() == parts[0] && m.GetParameters().Length == (parts.Length - 1)); if (methods.Any()) { mi = methods.First(); cachedMethodInfo.Add(new KeyValuePair<string, int>(mi.Name, parts.Length - 1), mi); } } if (mi != null) { var pars = mi.GetParameters(); object[] ps = new object[0]; if (pars.Length == parts.Length - 1) { // try building a parameter array ps = new object[pars.Length]; for (int i = 0; i < pars.Length; i++) { var par = pars[i]; var source = parts[i + 1]; ps[i] = ConvertString(source, par.ParameterType); } } // parameters ready - call it try { mi.Invoke(this, ps); } catch (Exception ex) { } } }

В кусочке кода выше, я постарался закэшировать дорогой поиск инфы о методе. Возможно есть решения и получше, но у меня все работает. Это в очередной раз показывает, что не всегда нужно использовать F# или лезть в DLR чтобы быстро получить интерпретатор маленькой DSL.

Вот собственно все, о чем хотел рассказать.

Заметки

↑ Вот у этой сноски цифра 1

Tags:

Hubs:

.NET